mardi 9 mai 2017

Conditional checking of "datatable checkboxes" in jQuery

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

try {
                $('#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 enter image description here

but doesn't work on the second page of the datatable enter image description here

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



Aucun commentaire:

Enregistrer un commentaire