CODEWITHSUNDEEP
javascriptjquerydatatable
bnieland
bnieland

Reputation: 6496

Add rows to a JQuery DataTable without redrawing

How can you add rows to a JQuery DataTable without redrawing the entire table?

The behavior I would like is for it to find the correct location (based on the sort) to insert the row into the table while maintaining scroll position of the table and pagination if any.

Upvotes: 3

Views: 6126

Answers (2)

Georgios Syngouroglou
Georgios Syngouroglou

Reputation: 19944

I was facing the same problem. The solution i found for this were a new function with the name fnStandingRedraw http://datatables.net/plug-ins/api/fnStandingRedraw. I added the above code to be able to use this function,

$.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);
};

After that i execute the following commands,

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

where,
theTable: is the datatable variable (var theTable = $('#example').dataTable();).
reply: is the information i add to a row of mine datatable. More on http://datatables.net/plug-ins/api/fnStandingRedraw.

The first command adds a row on the table without redrawing it. After this, the new row will not being displayed on the table.
The second command redraws the table, so the new raw will appear, but retain the current pagination settings.
This worked fine for me.

Upvotes: 1

Ertug
Ertug

Reputation: 301

Use dataTable().fnAddData()

http://datatables.net/ref#fnAddData

Example:

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

Upvotes: 0

Related Questions