jQuery DataTables:为多个表保存相同的状态

时间:2015-06-01 10:29:19

标签: jquery datatables jquery-datatables datatables-1.10

我希望在更改表的状态(例如:每页行数)时,记录更改并应用于所有表。我尝试使用stateSave: true,但只保存了我进行更改的表格。

$('#currentTab').dataTable({
    "order": [[0, "desc"]],
    stateSave: true
});

$('#twoWaveTab').dataTable({
    "order": [[0, "desc"]],
     stateSave: true
});

$('#EvolTab').dataTable({
    "order": [[0, "desc"]],
    stateSave: true
});

如何为表保存相同的状态,同时为其他通用表保存?

1 个答案:

答案 0 :(得分:0)

可以使用stateSaveParams事件和state.save() API方法。

没有直接的方法将一个表的状态复制到另一个表中,您需要单独设置每个状态属性。以下代码仅将页面长度从一个表复制到$(this).DataTable().page.len(data.length)的其他表。

您需要将example1example2example3替换为表格的ID(currentTabtwoWaveTabEvolTab)。< / p>

var table1 = $('#example1').DataTable({
    "order": [[0, "desc"]],
    stateSave: true
});

var table2 = $('#example2').DataTable({
    "order": [[0, "desc"]],
    stateSave: true
});

var table3 = $('#example3').DataTable({
    "order": [[0, "desc"]],
    stateSave: true
});

var is_save_in_progress = false;
var $tables = $('#example1, #example2, #example3');
$tables
   .on( 'stateSaveParams.dt', function (e, settings, data){
      // Save DOM element
      var that = this;

      // If state saving is not in progress
      if(!is_save_in_progress){
         is_save_in_progress = true;

         // Iterate over all tables
         $tables.each(function(index){

            // If table is other than the initial table
            if(this.id !== that.id){

               // Set page length, save state and redraw the table
               $(this).DataTable()
                  .page.len(data.length)
                  .state.save()
                  .draw(false);
            }         
         });

         // Indicate that state saving is over
         is_save_in_progress = false;
      }            
   });

请参阅this JSFiddle进行演示。