Javascript DataTables row.add 到特定索引
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30712227/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
DataTables row.add to specific index
提问by filur
I'm replacing row items like this:
我正在替换这样的行项目：
var $targetRow = $(entity.row),
dataTable = $targetRow.closest('table.dataTable').DataTable();
dataTable.row($targetRow).remove();
dataTable.row.add({ foo: 1 }).draw();
I have logic in the rowCreatedcallback bound to the table, thus I'm recreating the row to make use of it. This works fine. But row.addalways adds the regenerated row last in the list. Is there any way to insert it into a specific index?
我在rowCreated绑定到表的回调中有逻辑，因此我正在重新创建行以使用它。这工作正常。但row.add总是在列表中最后添加重新生成的行。有没有办法将它插入到特定的索引中？
回答by davidkonrad
dataTables holds its rows in an indexed array, and there is no API methods for adding a new row at a specific index or change the index()of a row.
dataTables 将其行保存在索引数组中，并且没有用于在特定索引处添加新行或更改行的 API 方法index()。
That actually makes good sense since a typical dataTable always is sorted / ordered or filtered on data, not the static index. And when you receive data from a server, or want to pass data to a server, you never use the static client index()either.
这实际上很有意义，因为典型的 dataTable 总是对数据进行排序/排序或过滤，而不是静态索引。当您从服务器接收数据，或者想要将数据传递给服务器时，您也永远不会使用静态客户端index()。
But if you think about it, you can still reorder rows and by that insert a row at a specific index very easy by code, simply by reordering the data. When a new row is added, swap the data from the last row (the inserted row) to the second last row, then swap data from the second last row to the third last row and so on, until you reach the index where you want to insert the row.
但是，如果您考虑一下，您仍然可以重新排序行，并通过代码非常容易地在特定索引处插入一行，只需重新排序数据即可。添加新行时，将数据从最后一行（插入的行）交换到倒数第二行，然后从倒数第二行交换数据到倒数第三行，依此类推，直到到达所需的索引插入行。
[0][1][2][3][4->][<-newRow]
[0][1][2][3->][<-newRow][4]
[0][1][2->][<-newRow][3][4]
Example, inserting a new row at the index where the mouse is clicked :
例如，在单击鼠标的索引处插入一个新行：
$("#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);
});
demo -> http://jsfiddle.net/mLh08nyg/
回答by RickL
Another way is to insert the row, and then move the row in the DataTable row array to a position you specify before redrawing the Table:
另一种方法是插入行，然后在重新绘制表格之前将 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);
