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 с идентификаторами таблиц (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 для демонстрации.