jquery - Jquery数据表在指定索引处添加新行

Question

是否有可能在 Jquery 数据表中的第 2/3/...n 行之后添加新行？我使用了这种方法 fnAddData([...])。它按预期工作。但我需要在两行之间添加记录。请任何人帮助我..

Answer 1

我与您分享我所做的：

// for example you want to insert after the 2nd row
var numberOfRowAfterYouWantToInsert = 2;
var rowAfterYouWantToInsert = $("#yourTableId tr").eq( numberOfRowAfterYouWantToInsert );
var rowsAfter_rowAfterYouWantToInsert = rowAfterYouWantToInsert.nextAll();
var standbyTable = $("<table>");
// remove rows by putting over to a standby table
standbyTable.append( rowsAfter_rowAfterYouWantToInsert );
// just did an empty tr here
var tr = $("<tr>");
// append it
$("#yourTableId").append( tr );
// and put back those removed rows to the original table
$("#tableID").append( rowsAfter_rowAfterYouWantToInsert );

这个解决方案简单易读，主要好处是：它有效:) 希望对您有所帮助！

编辑：我发现有一个更简单的解决方案：

// for example you want to insert after the 2nd row
var numberOfRowAfterYouWantToInsert = 2;
var rowAfterYouWantToInsert = $("#yourTableId tr").eq( numberOfRowAfterYouWantToInsert );
// new row with two cells
var tr = $("<tr><td>asd</td><td>qwe</td></tr>");
rowAfterYouWantToInsert.after( tr );

Answer 2

这对我有用。从数据表中获取数组，在所需索引处拼接值，然后重绘数据表。这样，如果您必须重新绘制 - 您附加的值仍将在表中。

var newRow = [1, 2, 3]; // new row in the datatable
var index = 4; // index for the new row to be added
var currentRows = datatable.data().toArray();  // current table data
currentRows.splice(index, 0, newRow);

datatable.clear();
datatable.rows.add(currentRows);
datatable.draw();

Answer 3

将行添加到您的表（其中 tr 它是对要在行之前插入的表的 DOM 引用）：

var html = "<tr><td>a</td><td>b</td></tr>";
$(tr).after(html);

接下来，使用此函数重置表（其中 tbServer 是表 ID）：

function ResetDataTable() {
    $("#tbServer thead tr").remove();
    var oHeadRow = $(".dataTables_scrollHeadInner").find("table thead tr").clone();
    $("#tbServer thead").append(oHeadRow);
    var oTbl = $("#tbServer").clone();
    oTable.destroy();
    $("#tbServer").remove();
    $("#divTbl").append(oTbl)
    SetupDataTable();
}