向JQuery DataTable添加行而不重新绘制

Add rows to a JQuery DataTable without redrawing

本文关键字:新绘制 绘制 JQuery DataTable 添加行      更新时间:2023-09-26

如何在不重新绘制整个表的情况下向JQuery DataTable添加行?

我想要的行为是为它找到正确的位置(基于排序)插入到表中,同时保持表的滚动位置和分页(如果有的话)

我也面临着同样的问题。我找到的解决方案是一个新的函数的名称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:是数据表变量(var theTable = $('#example'). datatable();)。
reply:是我添加到我的数据表的一行中的信息。更多信息请访问http://datatables.net/plug-ins/api/fnStandingRedraw。

第一个命令在表上添加了一行,但没有重新绘制它。在此之后,新行将不会显示在表上。
第二个命令重新绘制表,因此将显示新的原始数据,但保留当前的分页设置。

使用dataTable().fnAddData()

http://datatables.net/ref fnAddData

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