1

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

});

1 Answer 1

0

I realized where I went wrong. I didn't include the click event listeners in the code posted here, but that's where it was failing. They were being called in the right place (fnDrawCallback), but I did not remove and re-add the click event on each page draw. Also, the checkbox update code needs to be wrapped in a setTimeout() function to allow enough time for the page to draw before updating the checkboxes.

    setTimeout(function()
            {
                var allChecked = true;

                $('table tbody td input[type="checkbox"]').each(function() 
                {
                    if(!$(this).is(':checked')) 
                    {
                        allChecked = false;
                        return;
                    }
                });

                $('table thead th input[type="checkbox"]').prop('checked', allChecked);

                $('table thead th input[type="checkbox"]').off("click").click(function() 
                {
                    var chk = $(this).prop('checked');

                    $('table thead th input[type="checkbox"]').each(function()
                    {
                        $(this).prop("checked", chk);
                        $('table tbody td input[type="checkbox"]').prop('checked', chk);

                        if($(this).prop('checked'))
                        {
                            $("#data_checkboxAll").removeClass('hidden');
                            $("#data_checkAll").show();
                            $('table tbody tr td').css("background", "#ababab");
                        }
                        else
                        {
                            $("#data_checkboxAll").addClass('hidden');
                            $('table tbody tr td').css("background", "#fff");
                        }
                    });
                });
            }, 100);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.