rowTads 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);