mardi 24 janvier 2017

JQuery DataTables Column Checkbox For Current Page

I couldn't find an answer to this, but I'm trying to use a DataTable with a checkbox column to select all rows for the current page. The problem I am having is that when you click the select all checkbox on page 1, it is checked for all the pages (but not the rows except page 1). So the column is being shared across all pages.

I do not want that - only for the current page and the state to be retained when a user causes the event. The data columns are pulled in from the database, but the checkbox column is obviously not. I have click events on the checkbox column and the checkboxes in each row.

    $scope.oTable = $('#simpleDataTable').dataTable({
    "destroy": true,
    "bDestroy": true,
    "aoColumnDefs": headerData,
    "aaData": $scope.aData,
    "processing": true,
    "deferRender": true,
    "aoColumns": [{
    "sTitle": '<div class="checkbox checkbox-success" style="padding-left:5px;">' +
        '<input id="tblCheckbox" name="tblCheckbox" class="styled" type="checkbox">' +
        '<label for="tblCheckbox" ></label>' +
        '</div>',
    "mData": "id",
    "mRender": function(data, type, full) {
        var DRP = "" ;

        if(full.d){
            DRP += "<span title='Answers' class='orangeColr'>"+full.d+"</span>";
        }
        if(full.r){
            DRP += "<span title='Company' class='greenColr'>"+full.r+"</span>";
        }
        if(full.p){
            DRP += "<span title='Payment' ng-if='full.p' class='perpulColr'>" + full.p + "</span>";
        }

        full.DRP = "<div class='text-center'>"+DRP+"</div>";
        full.DRP = $.trim(full.DRP);

        return '<div class="checkbox checkbox-success">' +
            '<input type="checkbox" class="tblCheckbox_' + data + '" id="tblCheckbox_' + data + '" class="styled"  >' +
            '<label for="tblCheckbox_' + data + '"></label>' +
            '</div>';
    },
    bSortable: false
    }],
    "iDisplayLength" : $scope.pageQuantity,
    "oLanguage": {
    "sLengthMenu" :"| View <span class='valueStyle1 activeGroup'>25</span>&nbsp;&nbsp;<span class='valueStyle1' >50</span>&nbsp;&nbsp;<span class='valueStyle1'>100</span>",
    "sInfo": "_START_ - _END_ of _TOTAL_",
    "sInfoEmpty": "0 - 0 of _MAX_",
    'oPaginate' : {
        "sFirst": "&laquo;",
        "sLast": "&raquo;",
        "sNext": "&rsaquo;",
        "sPrevious": "&lsaquo;",
    },
    "sInfoFiltered": '',
    },
    scrollY: $scope.scrollYheight || (
    $(window).height()-$("#filterPophoverContent").height() + 140
    ),
    scrollX: true,
    scrollCollapse: true,
    paging: true,
    pagingType: "full_numbers",
    "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
    },
    'fnDrawCallback' : function( oSettings  ) {

    },
    "dom": '<"top"f>rt<"bottom"ilp><"clear">',
    "bRetrieve": true

});




Aucun commentaire:

Enregistrer un commentaire