How to add checkbox in ajax return data table

Hi guys this is my actual question

How to add checkbox in ajax return data table and get the value of the checked checkbox in ajax call

Dear mentors i am working on a asp.net core mvc .net 6 project where i have a view in which i am making a ajax call to load data to a datatable

the ajax call and the datatable loads script is as follows

$(document).ready(function () {
                $.ajax({
                    type: "POST",
                    dataType: "JSON",
                    rl: "/HRValidation/Indexresult",
                    success: function (response) {
                        console.log(response);
                        $('#example').dataTable({
                            data: response,
                            columns: [
                                {
                                    targets: 0,
                                    data: null,
                                    className: 'text-center',
                                    searchable: false,
                                    orderable: false,
                                    render: function (data, type, full, meta) {
                                        return '<input type="checkbox" class="_check" name="check" value="' + full.employeeId + '">';
                                    },
                                    width: "5%"
                                },
                                { 'data': 'employeeName' },
                                { 'data': 'employeeEmail' },
                                { 'data': 'employeePersonalNumber' },
                                { 'data': 'employeeDateofJoining' },
                                { 'data': 'employeePermanentCity' },
                                { 'data': 'employeePermanentState' },
                                { 'data': 'employeePermanentCountry' },
                                { 'data': 'totalErrors' },
                                {
                                    mRender: function (data, type, row) {
                                        return '<a ref="/HRDashboard/Edit/' + row.employeeId + '" class="bi bi-pen"></a> ';
                                    }
                                },
                            ],
                            autofill: true,
                            select: true,
                            responsive: true,
                            destroy: true,
                            scrollY: true,
                            scrollX: true,

                        })

                    },
                    error: function (error) {
                        console.log(response);
                    }

                });
            });
        }

all i am trying is that if some of the checkboxes are checked and if its related button is pressed an on click function should execute and it a ajax query

what i have tried is

$(document).ready(function () {
            $("#assigned").click(function () {
                var values = $('input[type="checkbox"].myCheckbox:checked').map(function () {
                    return $(this).val();
                }).toArray();
                //var checkedIds = $('.chkBxClass:checkbox:checked').map(function () { return this.value; }).get().join(',');
                //console.log(checkedIds);
                //var hriss = document.getElementById("hr").value;

                $.ajax({
                    type: "POST",
                    dataType: "JSON",
                    rl: "/HRValidation/AssignToHR",
                    data: JSON.stringify({ name: checkedIds, hris: hriss }),
                    contentType: 'application/json',
                    success: function (response) {
                        console.log(response);

                    },
                    error: function (error) {
                        console.log(response);
                    }

                });
            });
        });

i need to pass the checkbox values as array because i the controller i need to perform an operation using foreach loop and make changes in the db.

Thanks in advance

$(document).ready(function () { $("#assigned").click(function () { var values = $('input[type="checkbox"].myCheckbox:checked').map(function () { return $(this).val(); }).toArray(); // Perform other operations with the retrieved checkbox values as needed // Send the values as an array in the AJAX call $.ajax({ type: "POST", dataType: "JSON", url: "/HRValidation/AssignToHR", data: JSON.stringify({ name: values }), // Modify the data property to send the values as an array contentType: 'application/json', success: function (response) { console.log(response); }, error: function (error) { console.log(response); } }); }); });

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Rajkiran Swain3y ago

Modify the rendering of the checkbox column in the $('#example').dataTable function to include a class name for the checkboxes, like this:

render: function (data, type, full, meta) {
  return '';
}

Modify the click event handler for the button (in this case, with the id #assigned) to retrieve the checked checkbox values and send them as an array in the AJAX call:

In the server-side ASP.NET Core MVC controller action (AssignToHR), you can receive the checkbox values as an array and perform the desired operations using a foreach loop or other means, like this:

[HttpPost]
public IActionResult AssignToHR([FromBody] List name)
{
  // Perform operations with the received checkbox values as needed

  return Ok("Success"); // Return a response as needed
}