Data table loading from page 1 after refresh , want to retain current page.

BASUDEBBANERJEE

Hi guys, Please help me. I am binding one data table with data and data should be refresh every 5 mins so i am calling a javascript interval and binding the data table again. it is working fine except data table again started from 1 st page but requirement is it should hold the current page. I am putting the code segment for better understanding. Data i am getting from data base by ajax post.Thanks in advance.

I have updated my table biding option , please look into it.

1> Java script interval calling the function:

setInterval(function () {
                GetZoneDetails (elem);
            }
        }, 30000);

2>Calling ajax post for data:

 var GetZoneDetails =function (ele) {
                var zID=1;
                var requestData = {
                    ZoneID: zID,
                    PidPName: null,
                    IdNameSelect: null
                };
                $.ajax({
                    url: '/DashBoard/GetZoneDetails',
                    type: 'POST',
                    data: JSON.stringify(requestData),
                    dataType: 'json',
                    contentType: 'application/json; charset=utf-8',
                    async: true,
                    processData: true,
                    cache: false,
                    error: function (xhr) {
                        alert('Error: ' + xhr.statusText);
                    },
                    success: function (result) {

                        PopulateZoneDetails(result, ele, zID);
                    },

                });
            }

3> Creation Of Data Table Content:

var PopulateZoneDetails = function (obj, ele, zID) {
                var rows = new Array();
                var tr = $("<tr></tr>");
                var td = $("<td></td>");
                for (var i = 0; i < obj.length; i++) {
                    var clone_td = $(td).clone();
                    clone_td.html(obj[i].TotalTime);
                    clone_td.appendTo(tr);

                    clone_td = $(td).clone();
                    clone_td.html(obj[i].ZonenTime);
                    clone_td.appendTo(tr);

                    clone_td = $(td).clone();
                    clone_td.html(obj[i].FName);
                    clone_td.appendTo(tr);

                    clone_td = $(td).clone();
                    clone_td.html(obj[i].Comments);
                    clone_td.appendTo(tr);
                    
                    if (obj[i].ZoneInTime != null) {
                        var timeSet = moment(obj[i].ZoneInTime).format("DD-MM-YYYY HH:mm:ss");
                        clone_td = $(td).clone();
                        clone_td.html(timeSet);
                        clone_td.appendTo(tr);
                    }
                    else {
                        var htmlTextTime = '<td><img class="time" id=timeWatchNo' + obj[i].PatientID + ' src="../Content/watch.png" onclick="timePost(\'' + ele + '\' ,' + zID + ',\'' + obj[i].PatientID + '\')" /><label id= lbl' + ele + '></label></td>'
                        $(tr).append(htmlTextTime);
                    }
                    var htmlTextStatus = '<td style="text-align: center"><img src="../Content/nxt.png" href="#status-popup" data-toggle="modal" onclick="UpdateStatus(\'' + zID + '\',\'' + obj[i].PatientID + '\',\'' + ele + '\')"/></td>';
                    $(tr).append(htmlTextStatus);
                    $(tr).appendTo($(".append" + ele));
                    rows.push($(tr));
                    tr = $("<tr></tr>");
                }
                var table = $("#tbl" + ele);
                    triggerTableEvents(rows, table);
            }

4> Data Table binding:

var triggerTableEvents = function (rows, table) {
                if ($.fn.dataTable.isDataTable(table)) {
                    var tbl = $(table).dataTable();
                    tbl.fnDraw();     
                }
                else {
                    table = table.dataTable({
                        paging: true,
                       "iDisplayLength": 5,
                        //"aLengthMenu": [[5, 10, 15, 25, -1], [5, 10, 15, 25, "All"]],
                        "bFilter": false,
                        "bInfo": false,
                        "bLengthChange": false,
                        "bSort": false,
                      //  fnStandingRedraw: true,
                        "order": [[0, "asc"]],
                        
                        columnDefs: [
        { orderable: false, "targets": 3 }
                      ]
                    });
                }
            }

jLinux

Can you please follow the instructions below the reply input box? Formatting your code makes helping you easier.

However, without looking at any of the content of your post, im assuming you're using ajax.reload().. Which if you look at the 2nd parameter it takes, you should see the solution to your problem. Look at the 2nd code snippet under Examples at ajax.reload()

BASUDEBBANERJEE

Sorry JLinux I am new to the community, now I edited the question .

jLinux

Oh wait, so you aren't using ajax for the source? but rather you're creating an entire AJAX request yourself, then creating the table rows with the response, and creating a table from that?

Thats definitely not the best way to go, you should just return JSON objects from the data source, then use ajax to call it. Then if you need to reload the table, you can just use `-init ajax.reload*)

Also, I see you're using $().dataTable(), I would recommend using $().DataTable() instead

BASUDEBBANERJEE

Hi JLinux I am returning json data from my controller and i am doing customization of that data.

jLinux

You should be doing the customization to the DataTables content.. within datatables. I would do the customization within createdRow, thats how I do it, I promise you, the end result is easier.

The more I look through your code, the more I realize you're just re-inventing the wheel, You havent coded anything you cant accomplish by just using ajax and createdRow

BASUDEBBANERJEE

Please look, into the updated code segment..

jLinux

i did...

BASUDEBBANERJEE

Now i omitted all the unused code and add one tbl.fnDraw(), which working fine data also updated but problem persist, means data coming from page 1, finding something called fnRedraw but with no luck.
can you suggest any plugin.

janpan

I'm still a newbie to datatables, but have you tried

"bStateSave": true

BASUDEBBANERJEE

Hello janpan I tried but not working, thanks .

BASUDEBBANERJEE

Hi JLinux,
can you please provide me a small example of how to convert my code into createdRow and ajax option, I went through that but finding that a little difficult. Or any link about that example also fine.
I know i took a wrong approach and it is become unsolvable. Please help. Thanks in advance.

jLinux

How is your JSON formatted in the response? Show me a section of one or two rows, (all the way from the root of the JSON). ANd format it please

BASUDEBBANERJEE

Thanks everybody specially, JLinux. atlast i solved the problem by holding the current page info and set that one as current page , by the below mentioned code.

var p = tbl.fnPagingInfo().iPage;
                    tbl.fnClearTable();
                    for (var i = 0; i < rows.length; i++) {
                        tbl.fnAddData($(rows[i]));
                    }
                    tbl.fnPageChange(p); 
                    }

Thanks again for your support.

jLinux

Awesome! Glad you got it solved!!