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

Question

我希望当我更改表格的状态（例如：每页的行数）时，记录更改并应用于所有表格。我尝试使用stateSave: true，但它只保存在我进行更改的表中。

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

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

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

如何为一个表保存相同的状态，同时为其他通用表保存？

Answer 1

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

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

您需要将example1、example2 和example3 替换为您的表ID（currentTab、twoWaveTab 和EvolTab）。

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 进行演示。