DataTable row.add到特定索引 [英] DataTables row.add to specific index

问题描述

我正在替换这样的行项目：

  var $ targetRow = $（entity.row），
 dataTable = $ targetRow.closest（'table.dataTable'）。DataTable（）; 
 
 dataTable.row（$ targetRow）.remove（）; 
 
 dataTable.row.add（{foo：1}）。draw（）; 
  

我在 rowCreated 回调绑定中有逻辑到桌子，所以我正在重新创建这个行来利用它。这工作正常但是， row.add 总是在列表中添加最后一行。有没有办法把它插入到特定的索引中？

解决方案

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（）; 
 
 //插入一个测试行
 count ++; 
 table.row.add（[count，count，count， count，count]）。draw（）; 
 
 //将行添加到所需的索引（这里是我们点击的行）
 var index = table.row（this）.index ），
 rowCount = table.data（）。length-1，
 insertedRow = table.row（rowCount）.data（），
 tempRow; 
 
 （var i = r owCount; i> index; i--）{
 tempRow = table.row（i-1）.data（）; 
 table.row（i）.data（tempRow）; 
 table.row（i-1）.data（insertedRow）; 
} 
 //刷新当前页
 table.page（currentPage）.draw（false）; 
}）; 
  

演示 - > http://jsfiddle.net/mLh08nyg/

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 rowCreated callback bound to the table, thus I'm recreating the row to make use of it. This works fine. But row.add always adds the regenerated row last in the list. Is there any way to insert it into a specific index?

解决方案

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.

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.

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/

这篇关于DataTable row.add到特定索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！