Conditional checking of "datatable checkboxes" in jQuery

Question

Hi I'm trying to create a table that consists of checkboxes. And each row has its own class and ID.

$('#niisPrprtyCoverageTable').dataTable({
    "data" : coverageList,
    "columns" : [ { 
        "data" : "seqNo",
     "visible" : false
    }, {
        "data" : "coverageCode"
    }, {
        "data" : "coverageName"
    }, {
        "data" : "coverageCode",
        "width" : "80px",
        "className" : "text-center",
        render : function(data, type, row) {
            var arrData = data.split(";");
            var coverageCd = arrData[0];
            var coverageRel = nvl(arrData[1], coverageCd);
            data = '<input class="'+coverageRel+'" id="'+coverageCd+'" type="checkbox" onClick="addToArray('
                + coverageCd
                + ','
                + coverageRel
                + ')">';
            return data;
        }
    } ],
    "searching" : false,
    "bLengthChange" : false,
    "iDisplayLength" : 15 ,
    "bSort" : false,
    "columnDefs" : [ {
        "targets" : [ 1, 2 ],
        "className" : "left"
    }, {
        "targets" : [ 2 ],
        "width" : "150px",
    }, {
        "targets" : [ 1 ],
        "width" : "100px",
    }, {
        "targets" : [ 3 ],
        "width" : "50px",
        "className" : "text-center"
    } ]
});
niisPrptyCoverageTable = $('#niisPrprtyCoverageTable').DataTable();

$('#select-all').on('click', function(){
    alert('ss');
    // Get all rows with search applied
    var rows = niisPrptyCoverageTable.rows({ 'search': 'applied' }).nodes();
    // Check/uncheck checkboxes for all rows in the table
    $('input[type="checkbox"]', rows).prop('checked', this.checked);
});

What should happen is, if I check the main row, all the rows under his 'code or id' should be checked also.

It works but only on the first page

but doesn't work on the second page of the datatable

var array = [];
function addToArray(coverageCd, coverageRel) {
    var rows = niisPrptyCoverageTable.rows('.'+coverageRel).nodes().className;
    $('input[class='+coverageCd+']', rows).prop('checked', '#'+coverageCd.checked);
}

how to differentiate I check the main row and others ?

Searching
– Searching

2017-05-10 03:43:51 +00:00
Commented May 10, 2017 at 3:43 — Searching
– Searching, Commented May 10, 2017 at 3:43

Gyrocode.com · Accepted Answer · 2017-06-01 11:29:20Z

1

Use $() API method to get access to elements on all pages, not just current page.

For example:

var array = [];
function addToArray(coverageCd, coverageRel) {
    var rows = niisPrptyCoverageTable.rows('.'+coverageRel).nodes().className;
    niisPrptyCoverageTable.$('input[class='+coverageCd+']', rows).prop('checked', '#'+coverageCd.checked);
}

Alternatively see jQuery DataTables Checkboxes extension for easier handling of checkboxes in a table powered by jQuery DataTables.

edited Jun 1, 2017 at 11:29

answered May 20, 2017 at 21:30

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Conditional checking of "datatable checkboxes" in jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related