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

时间:2017-01-02 20:02:54

标签: jquery datatables-1.10

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

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

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


    });
});

3 个答案:

答案 0 :(得分: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工作,这样可以保留页面重新加载之间的复选框状态。

答案 1 :(得分:0)

你能不能将值用于会话存储而不是var id =""

答案 2 :(得分:0)

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