JQuery DataTables Column Checkbox для текущей страницы

Question

Я не мог найти ответ на этот вопрос, но я пытаюсь использовать DataTable с столбцом флажка, чтобы выбрать все строки для текущей страницы. Проблема, с которой я столкнулась, заключается в том, что когда вы нажимаете флажок «Выбрать все» на стр. 1, он проверяется на всех страницах (но не на строках, кроме страницы 1). Таким образом, столбец разделяется по всем страницам.

Я не хочу этого - только для текущей страницы и состояния, которое необходимо сохранить, когда пользователь вызывает событие. Столбцы данных извлекаются из базы данных, но столбец флажка явно отсутствует. У меня есть события click в столбце checkbox и флажках в каждой строке.

$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 

});

Answer 1

Я понял, где я ошибся. Я не включил слушателей событий кликов в код, размещенный здесь, но это то, где он терпел неудачу. Они вызывались в нужном месте (fnDrawCallback), но я не удалял и не добавлял событие click на каждом розыгрыше страницы. Кроме того, код обновления флажка должен быть завернут в функцию setTimeout(), чтобы достаточно времени для рисования страницы, прежде чем обновлять флажки.

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);