How to keep scroll position when inserting new rows in datatables

Question

I'm using DataTables plugin to work with my table. I want to set JSON object as a datasource for my table and update the content every time when this object is changed.

To initialize my table I use the following code:

     var obj = [];

     // if I make start initialization of the object - the row in a table appears.
     //var obj = [{"Name": "name1", "Id": "id1", "Value":"value1"}];

     var table;

        $(document).ready(function () {

            table = $('#example').dataTable({
                "sPaginationType": "full_numbers",
            "sScrollY": "250px",
            "aaSorting": [],
            "aaData": obj,
            "aoColumns": [
            { "mDataProp": "Name" },
            { "mDataProp": "Id" },
            { "mDataProp": "Value" }
        ]
        });
    }
    );

To update my JSON object:

function updateObject() {
    var response = $.ajax({
        type: "GET",
        datatype: "json",
        url: myURL,
        success: function (result) {
            obj = jQuery.parseJSON(result);
            //table.fnDraw(); - tried this but it doesn't work
        }
    });
}

JSON data which I get from the server:

 [{"Name": "name1", "Id": "id1", "Value":"value1"}, 
     {"Name": "name2", "Id": "id2", "Value":"value2"},...]

Is it possible to refresh table content after I get new data from the server?

UPDATE:

table.fnClearTable();
table.fnAddData(obj, false);
table.fnStandingRedraw();

After inserting new rows, current page gets lost and current scroll position also. fnStandingRedraw method helps to keep page position. But scroll jumps to the first row. Is there any way to calculate current scroll position to make a jump back after updating (http://datatables.net/docs/Scroller/1.0.1/) or some other solution?

did you find a solution to this issue ?

Jonathan
– Jonathan

2014-11-21 23:59:00 +00:00
Commented Nov 21, 2014 at 23:59 — Jonathan
– Jonathan, Commented Nov 21, 2014 at 23:59

OQJF · Accepted Answer · 2013-03-20 12:04:39Z

1

I think this can help you. You should first remove all the data and add the new data again, document is here

table.fnClearTable().fnAddData(obj);

answered Mar 20, 2013 at 12:04

OQJF

1,3709 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alex B. Over a year ago

I also use fnStandingRedraw() plugin to keep my paging position after update. But I can't keep scroll position. Maybe you know how to handle this problem ?

OQJF Over a year ago

Not really, let me see what the problem is?

ricks Over a year ago

You shouldn't have to remove all the data and insert new data. This isn't a good solution for someone who has large data sets and is trying to append data on scroll.

Alberto De Caro · Accepted Answer · 2013-03-20 12:11:29Z

0

I had a similar scenario. So eventually I solved this way:

function UpdateDatatable(data, $table) {
    $.ajax({
        type: "GET",
        dataType: "JSON",
        url: "../biz/datahandler.ashx",
        data: ({data: data}),
        async: true,
        error: function (xhr, ajaxOptions, thrownError) {
            /* manage the error */
        },
        success: function (dataget) {
            /* maange the success */
            $table.dataTable({
                ...
            })
    });
}

answered Mar 20, 2013 at 12:11

Alberto De Caro

5,2139 gold badges51 silver badges77 bronze badges

Collectives™ on Stack Overflow

How to keep scroll position when inserting new rows in datatables

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related