Question

我需要在数据表中添加一个新行，该数据表应该放在表格的顶部，我已经使用了排序插件，但它失败了。

有人可以帮我解决这个问题吗？

Answer 1

经过一段时间后，我可以使用内置的 order（）功能在我的表格中解决此问题。（不需要额外的插件）

    var table = $('#adapterTable').DataTable();

    $('#newButton').on( 'click', function () {
        var row = ["<button id='savebutton'>save</button>","<input name='titel'/>"];
        table.row.add(row).draw( false );

        table.order([1, 'asc']).draw();
        table.order([0, 'asc']).draw();
    } );

这是有效的，因为我的表在第一列中有ID，在第二列中有文本字段。

我插入的行包含ID列中的保存按钮和第二列中的输入字段。

如果我现在对第二列进行排序，则输入框将显示在顶部。要按ID恢复排序，我只需在ID列上再添加一个order（）。这在某种程度上不会影响带按钮的行，只会影响具有数值的行。

table.order([0, 'asc']).draw();

这也是一种解决方法，它取决于您的表的内容。使用纯文本，您可能需要将其与隐藏列组合，仅用于订购或其他技巧。但是您可以使用数据表函数，而不需要直接操作表。

Answer 2

此解决方法可能有所帮助：

通过api将行添加到datatable对象（这样您在排序或分页时就可以获得数据）
不要重绘（所以新行不会在底部绘制）
通过.prepend()

var employersTable = $('#employersTable').DataTable();
$('#addRow').click(function(){
    var row = $('<tr>')
        .append('<td>added row</td>')
        .append('<td>Test 2</td>')
        .append('<td>123</td>')
        .append('<td>2014-05-09</td>')
        .append('<td>No</td>')
        .append('<td>blub</td>')

    employersTable.row.add(row);
    $('#employersTable tbody').prepend(row);
});

重要（可能）缺点：添加行时不会自动分页。

JSFiddle上的工作示例。

Answer 3

在我的情况下，表的排序顺序是服务器返回数据数组的顺序。客户端不执行任何其他排序（'ordering'设置为false）。为了将新行添加到数据数组客户端的开头，我执行了以下操作：

获取原始table.data()数据数组
将新行插入数组的开头
清除表并重新添加所有行

let newdata = Array.from(table.data());
newdata.unshift(['my', 'new', 'row']);
table.clear();
for (const row of newdata) {
  table.row.add(row);
}
table.draw();

Answer 4

add方法会将行推送到jquery.dataTables.js中的aiDisplayMaster数组。因此，您可以更改aiDisplayMaster中行的位置。以下是代码。

table = $("table").dataTable() //not DataTable() function
dt = table.api()
obj = {"id":131,"name":" 111  test"}
dt.row.add(obj);
var aiDisplayMaster = table.fnSettings()["aiDisplayMaster"];
irow = aiDisplayMaster.pop();
aiDisplayMaster.unshift(irow);
dt.draw();

在jQuery数据表的顶部添加一个新行

4 个答案: