Checkbox ticks not persisting through page changes

bjjrolls

Hi. Firstly thanks for your work on this tool it's been very helpful.

I have an issue with my datatable where checked checkboxes are not keeping their 'checked' state when I switch between pages. I have read other posts on the forum which describe the same issue, and found that if serverSide is false that the boxes should remain ticked.

I'd appreciate it if someone could take a look at my code and make a suggestion as to how to fix it.

$(document).ready(function () {
    var userGroupData = @Html.Raw(Model.UserGroupJson);
    var table = $('#usergroupTarget').DataTable({
        "data": userGroupData,
        "columns": [
            {"title": "Usergroup Name"},
            {"title": "Target"}
        ],
        "serverSide": false,

        "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            var tblTds = $('>td', nRow);
            tblTds[0].innerHTML = aData[1];

            $(nRow).attr("id", 'tblRow_' + aData[0]);
            tblTds[1].innerHTML = '<td><input type="checkbox" name="publishedstatus" value="' + aData[0] + '" id="' + aData[0] + '" onclick="Member(' + aData[0] + ')" /><label for="' + aData[0] + '"></label>></td>';
        }
    })
});

Cheers!

kthorngren

I'm not sure exactly what your fnRowCallBack is doing as far as checkbox status but it runs each time the row is displayed. Unless you are updating the row data with the checkbox status, checked or unchecked, I don't think this will work for you.

I've used columnDefs render with success. For example:

    columnDefs: [{targets: [checkCol], 
                render: function ( data, type, row ) {
                    if ( type === 'display' ) {             //if column data is 1 then set attr to checked, use row id as input id (plus prefix)
                        return '<input type="checkbox" ' + ((data == 1) ? 'checked' : '') + ' id="input' + row.id + '" class="filter-ck" />';
                    }
                    return data;
                  },
                  className: "dt-body-center"
                 },

You will have to change the return string to match what your input requirements. In this case checkCol is the column containing the checkbox and row.id is the unique id.

Kevin