DataTable服务器端进程如何记住分页上的复选框答案

【问题标题】：DataTable serverside process how to remeber checked boxes on paginationDataTable服务器端进程如何记住分页上的复选框
【发布时间】：2017-01-02 20:02:53
【问题描述】：

如何通过分页记住复选框的值。当我检查 3 页上的值时。它只存储最后一页的值和其他删除的值。

我在下面与客户端处理一起使用。

$('.button').click(function () {
    var id = "";
    var oTable = $("#example").dataTable();
    $(".checkboxClass:checked", oTable.fnGetNodes()).each(function () {


    });
});

【问题讨论】：

这行不通。因为如果在分页中单击下一页，它将删除 DOM 中的前一页元素并替换为新元素。这样我们就无法读取复选框的值。

标签： jquery datatables-1.10

【解决方案1】：

查看jQuery DataTables Checkboxes 扩展和server-side processing example，其中保留了复选框的状态。

例如：

var table = $('#example').DataTable({
   'processing': true,
   'serverSide': true,
   'ajax': '/lab/jquery-datatables-checkboxes/ids-arrays.php',
   'columnDefs': [
      {
         'targets': 0,
         'checkboxes': {
            'selectRow': true
         }
      }
   ],
   'select': {
      'style': 'multi'
   },
   'order': [[1, 'asc']]
});

我们也在尽快开发adding state saving/loading capability，这将允许在页面重新加载之间保留复选框的状态。

【讨论】：

如何将 rowID 推送到我以后可以使用的数组中

【解决方案2】：

能否请您使用会话存储中的值而不是 var id = "" 。

【讨论】：

会话存储？？

【解决方案3】：

这行不通。因为如果在分页中单击下一页，它将删除 DOM 中的前一页元素并替换为新元素。

但我们可以存储在数组中，然后在 ajax 中使用。

var checkedArray=[];
$(document).on('change','.checkboxClass',function(){
  if( $(this).is(':checked') )
   {
     //if checked add to array 
     checkedArray[checkedArray.length]=$(this).val();
   }else{
    //If unchecked remove the value from the array
    var index=checkedArray.indexOf($(this).val());
    if (index > -1) {
    checkedArray.splice(index, 1);
   }
 }
});

//then you can use it in click event
$('.button').click(function () {
var id = "";
//read checkedArray using for loop

});

工作小提琴：http://jsbin.com/fewigaxesa/edit?js,console,output

【讨论】：

评论不用于扩展讨论；这个对话是moved to chat。
@Sarath Kumar ：这不适用于以下场景。我选中了单个复选框。然后我在同一页面中全部选中，在页面中全部取消选中。但是我检查的那个复选框值仍然在我的数组上。而不是删除。请建议
@Sarath Kumar 它也存在于jsbin.com/fewigaxesa/edit?js,console,output 这里...当您单击标题时，检查结果 [25,23] 来了。然后取消选中标题。并选中第一个复选框。然后再次检查 header.reslut 将是 [25,23,25]。当您再次取消选中标题时，预期结果应该是所有标记的值都应该删除，因为取消选中标题。但是当您检查 [25] 时仍然存在。请建议
jsbin.com/toqutacovi/edit?js,console,output 检查这个我添加了这一行 var index=checkedArray.indexOf($(this).val()); if(index==-1)