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

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 将行添加到数据表对象（以便在排序或分页时获得可用的数据）
• 不要重绘（因此新行不会绘制在底部）
• 通过以下方式将同一行添加到表格顶部.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的工作示例。