Jquery Datatable alway showing the initially checked or uncheck values only

Question

I have similar case to a question bellow

Datatable unable to export updated checkbox values in excel as 0 or 1, alway showing the initially checked values only

I have a jQuery datatable and every thing is going alright from binding on the server side to showing data, but I need to submit the datatable from my razor page to another controller. So, I need the checked rows and non checked rows as well with their ids, so when I submit to controller all data in datatable are submitted well except the checkboxes values are not being updated ,they have been sent with their initial values ,even if I checked or unchecked them , I got only the initial value they got from the server on first bind

@section scripts {
    <script>
        var obj = @Html.Raw(Json.Serialize(Model));

        var storeId = document.getElementById('idStore').value;
        
        var tableParam;
        $(document).ready(function () {
         $('#myTable').DataTable({
            "proccessing": true,
            "serverSide": true,
            "ajax": {
                url: "/item/loaddata",
                type: 'POST',
                headers: { 'RequestVerificationToken': $('@Html.AntiForgeryToken()').val() },
                data: { "StoreId": storeId }
             },
             "columnDefs": [
                 {
                     "targets": 0,
                     "checkboxes": {
                         "selectRow": true
                     },
                 }
             ],
             "select": {
                 "style": "multi"
             },
            "columns": [


                {
                      "data": "selected", "searchable": false, "render": function (data, type, row) {
                         
                            return '<input type="checkbox" class="chk"' + (data ? ' checked' : '') + '/>';
                    }
                },

                {"name":"SNumber", "data": "tname"},
                { "name": "MName", "data": "lname" },
                { "name": "SGuid", "data": "itemguid", "visible": false, "searchable": false },



            ],
            "order": [[0, "desc"]]
        });


        });


       
        
            
    </script>

    <script type="text/javascript">


        $(document).on("click", "#btnSave", function (e) {
              var table = $('#myTable').DataTable();
 
            var datac = table.rows(function (idx, data, node) {
                return $(node);
            }).data().toArray();

             
                 
             
            $.ajax({
                url: "/inventory/saveselecteditems",
                type: 'post'
               , data: { "testmodel": datac }

            });



        });

       
    </script>



}

Answer 1

Datatable has a built-in function to get the selected rows.

table.rows({ selected: true }).data().toArray();

Change it like below:

$(document).on("click", "#btnSave", function (e) {
        var table = $('#myTable').DataTable();
        var datac = table.rows({ selected: true }).data().toArray();  
        $.ajax({
            url: "/inventory/saveselecteditems",
            type: 'post', 
            data: { "testmodel": datac }
        });
});

Update:

<script type="text/javascript">
    $(document).on("click", "#btnSave", function (e) {
        var table = $('#myTable').DataTable();
        var datac = table.rows(function (idx, data, node) {
            var chk = $(node).find("input:checkbox");
            if ($(chk).is(':checked')) {
                data.selected = true;
            } else {
                data.selected = false;
            }
            return $(node);
        }).data().toArray();
        $.ajax({
            url: "/inventory/saveselecteditems",
            type: 'post',
            data: { "testmodel": datac }

        });
    });
</script>