DataTables row.add к конкретному индексу

Question

Я заменяющие элементы строк, как это:

var $targetRow = $(entity.row), 
    dataTable = $targetRow.closest('table.dataTable').DataTable(); 

dataTable.row($targetRow).remove(); 

dataTable.row.add({ foo: 1 }).draw(); 

У меня есть логика в rowCreated обратного вызова, связанного с таблицей, таким образом, я воссоздавать строку, чтобы использовать его , Это прекрасно работает. Но row.add всегда добавляет регенерированную строку, последнюю в списке. Есть ли способ вставить его в определенный индекс?

Answer 1

dataTables содержит свои строки в индексированном массиве, и нет методов API для добавления новой строки в определенный индекс или изменения index() строки.

Это действительно имеет смысл, поскольку типичная dataTable всегда сортируется/упорядочивается или фильтруется по данным, а не по статическому индексу. И когда вы получаете данные с сервера или хотите передавать данные на сервер, вы никогда не используете статический клиент index().

Но если вы думаете об этом, вы все равно можете изменить порядок строк и тем самым вставить строку с определенным индексом очень просто с помощью кода, просто переупорядочив данные. Когда добавляется новая строка, замените данные из последней строки (вставленной строки) на вторую последнюю строку, затем поменяйте данные со второй последней строки на третью последнюю строку и так далее, пока не достигнете индекса, где вы хотите для вставки строки.

[0][1][2][3][4->][<-newRow] 
[0][1][2][3->][<-newRow][4] 
[0][1][2->][<-newRow][3][4] 

Пример, вставляя новую строку в индексе, где щелкнуть мышью:

$("#example").on('click', 'tbody tr', function() { 
    var currentPage = table.page(); 

    //insert a test row 
    count++; 
    table.row.add([count, count, count, count, count]).draw(); 

    //move added row to desired index (here the row we clicked on) 
    var index = table.row(this).index(), 
     rowCount = table.data().length-1, 
     insertedRow = table.row(rowCount).data(), 
     tempRow; 

    for (var i=rowCount;i>index;i--) { 
     tempRow = table.row(i-1).data(); 
     table.row(i).data(tempRow); 
     table.row(i-1).data(insertedRow); 
    }  
    //refresh the current page 
    table.page(currentPage).draw(false); 
}); 

демонстрационном ->http://jsfiddle.net/mLh08nyg/

Answer 2

Другой способ заключается в вставить строку, а затем переместить строка в массиве строк DataTable до положения, которое вы указываете перед перерисованием таблицы:

// Define the row to insert (using your method of choice) 
var rowInsert = $('#table-id').find('tr:last'); 
// Get table reference - note: dataTable() not DataTable() 
var table = $('#table-id').dataTable(); 
// Get api 
var dt = table.api(); 
// Insert row (inserted as the last element in aiDisplayMaster array) 
dt.row.add(rowInsert); 
// Get the array holding the rows 
var aiDisplayMaster = table.fnSettings()['aiDisplayMaster']; 
// Remove the last element in the array 
var moveRow = aiDisplayMaster.pop(); 
// EITHER add row to the beginning of the array (uncomment) 
//aiDisplayMaster.unshift(moveRow); 
// OR add row to a specific index (in this case to index 3) 
var index = 3; 
aiDisplayMaster.splice(index, 0, moveRow); 
// Redraw Table 
dt.draw(false);