在不重新绘制的情况下向 JQuery DataTable 添加行

Question

如何在不重绘整个表格的情况下向JQuery DataTable添加行？

我想要的行为是，在保留表格滚动位置和分页（如果有）的情况下，找到正确的位置（基于排序）将行插入表格中。

- bnieland

Answer 1

我曾经面对同样的问题。我找到的解决方案是使用名为fnStandingRedraw的新函数http://datatables.net/plug-ins/api/fnStandingRedraw。我添加了上述代码以便使用此函数。

$.fn.dataTableExt.oApi.fnStandingRedraw = function (oSettings) {
    if (oSettings.oFeatures.bServerSide === false) {
        var before = oSettings._iDisplayStart;

        oSettings.oApi._fnReDraw(oSettings);

        // iDisplayStart has been reset to zero - so lets change it back
        oSettings._iDisplayStart = before;
        oSettings.oApi._fnCalculateEnd(oSettings);
    }

    // draw the 'current' page
    oSettings.oApi._fnDraw(oSettings);
};

之后我执行了以下命令：

theTable.fnAddData([reply], false);
theTable.fnStandingRedraw();

在这里，
theTable: 指的是datatable变量 (var theTable = $('#example').dataTable();).
reply: 是我添加到自己datatable行的信息。更多信息请查看http://datatables.net/plug-ins/api/fnStandingRedraw。

第一个命令在不重绘表格的情况下添加了一行。添加后，新行不会显示在表格中。
第二个命令重新绘制表格，因此新的行将出现，但保留当前分页设置。
对我来说，这很好用。

- Georgios Syngouroglou

---

我遇到的问题是保持滚动位置，而不是分页。这是很好的信息，所以点赞（+1）。 - bnieland

在两个表中添加一行可能会在大型表上创建巨大的性能问题。 - Brock

Answer 2

使用dataTable().fnAddData()。

http://datatables.net/ref#fnAddData

例子：

http://www.datatables.net/release-datatables/examples/api/add_row.html

- Ertug

---

使用fnAddData会导致表格重绘并且不保留滚动位置。如果您使用draw = false参数，则在调用frDraw之前不会插入行。 - bnieland

抱歉，我有些疲倦，无法完全集中注意力。这个有用吗？bResetDisplay = false; oTable.fnDraw(); bResetDisplay = true;http://datatables.net/forums/discussion/573/how-to-stay-on-current-page-after-re-draw/p1 - Ertug

我还在那个论坛的最后一篇帖子中找到了这个：http://datatables.net/plug-ins/api#fnStandingRedraw。 - Ertug