How to add checkbox in ajax return data table

Question

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 '&lt;input type="checkbox" class="_check" name="check" value="' + full.employeeId + '"&gt;';
                                    },
                                    width: "5%"
                                },
                                { 'data': 'employeeName' },
                                { 'data': 'employeeEmail' },
                                { 'data': 'employeePersonalNumber' },
                                { 'data': 'employeeDateofJoining' },
                                { 'data': 'employeePermanentCity' },
                                { 'data': 'employeePermanentState' },
                                { 'data': 'employeePermanentCountry' },
                                { 'data': 'totalErrors' },
                                {
                                    mRender: function (data, type, row) {
                                        return '&lt;a ref="/HRDashboard/Edit/' + row.employeeId + '" class="bi bi-pen"&gt;&lt;/a&gt; ';
                                    }
                                },
                            ],
                            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

Rajkiran Swain · Answer

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: $(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); } }); }); }); 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 }