DataTable 服务器端处理如何记住分页上的复选框

Question

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

我在下面使用了客户端处理。

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


    });
});

Answer 1

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

Answer 2

不行。因为如果在分页中单击下一页，它将删除 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

});

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

Answer 3

查看 jQuery DataTables Checkboxes extension and 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 很快，这将允许在页面重新加载之间保留复选框的状态。

DataTable 服务器端处理如何记住分页上的复选框

DataTable serverside process how to remeber checked boxes on pagination

jquery

datatables-1.10