How to hold the state of a checked checbox in JQuery Datatable

elenora

Hi. I'm using DataTable version 1.10.20 and I'm using serverside processing to load my data. In my DataTable the first column holds checkboxes. My problem is after selecting a checkbox to be checked and changing the page of DataTable and return back to the previous page, the checkbox gets unchecked. Is there any way to keep its state to holds check state?

jQuery(document).ready(function ($) {

       oTable= $('#myDummyTable').DataTable({

            'orderClasses': false,

            "processing": true, // for show progress bar
            "serverSide": true, // for process server side
            "filter": true, // this is for disable filter (search box)
            "orderMulti": false,


           'columnDefs': [
               {
                   'targets': 0,
                   "searching": false,
                   'checkboxes': {
                       'selectRow': true
                     }
                },
                    {
                        'targets': 1,
                        "searching": false,
                        "visible": false
                    }
           ],
            rowId: "id",

            'select': {
                'style': 'multi',
                'selector': 'td:first-child'
            },
            'order': [[1, 'asc']],

            "pagingType": "full_numbers",
            //--------------------------------------------------------
            "language": {
                "url": "/language/Persian.json"
           },

        "ajax": {
            "url": "ApiApplicants/GetApiApplicantsData",
            "type": "POST",
            "datatype": "json",
        },

           "columns": [
                 {
               render: function(data, type, row) {    /*class='cbr'*/
                   return "<td>" +
                       "<input type='checkbox'>" +
                       "</td>";
               },
               className: "dt-body-center"
           },
            { "data": "id", "name": "Id", "autoWidth": true },

            { "data": "applicantName", "name": "ApplicantName", "autoWidth": true },

            { "data": "logDate", "name": "LogDate", "autoWidth": true },

            {
            defaultContent: '<input type="button" class="Edit" value="edit"/>'
            },
        ]
});

kthorngren

Looks like you are using the Gyrocode checkbox plugin. Their example for serverside processing keeps the checkbox state:
https://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/data-sources/server-side/

Their docs state this:

Column containing checkboxes must have unique data. Using columns.data option set to null for the column containing checkboxes will result in unexpected behavior.

You are creating an input in the checkbox column which is not per the requirements. Try this change to use a unique ID for that column:

           "columns": [
             { "data": "id" },
            { "data": "id", "name": "Id", "autoWidth": true },
 
            { "data": "applicantName", "name": "ApplicantName", "autoWidth": true },
 
            { "data": "logDate", "name": "LogDate", "autoWidth": true },
 
            {
            defaultContent: '<input type="button" class="Edit" value="edit"/>'
            },
        ]

The Gyroocde checkboxes is a third party plugin. Please use the Report a bug button on their site for support with the plugin.

Kevin