keep pagination state on fnReloadAjax

keirlav87

Basically as the title suggest I have a table that refreshes once a minute using fnReloadAjax like so - var refreshId = setInterval(function() {oTable.fnReloadAjax();}, 60000);

I was wondering, is there an in-built way to keep the pagination state when the reload ajax is triggered?

Thanks in advacnce

beginner_

So you are reloading all data not just new data? makes sense as long as rows are also delete else I would just add the new data and keep the old.

Get the data in a "manual AJAX" call (not through data tables, then use

[code]
oTable.fnClearTable(false); // clears all data
oTable.fnAddData(data, false); // add new data (can contain multiple rows;do not redraw table
oTable.fnStandingRedraw(); // redraw put stay on current page (this is a plugin function)
[/code]

Maybe there is a more elegant way and I've not actually tried this involving fnClearTable. Also what happens if new data has less pages than old one?

allan

fnReloadAjax has a standing redraw option - just pass true in as the third parameter.

Allan

keirlav87

Hi, Thanks for replying I have downloaded and added the fnStandingRedraw plugin and my reload ajax function now looks like this -

var refreshId = setInterval(function() {oTable.fnReloadAjax(null, null,true);}, 6000);

however the pagination state is still not being preserved, am I doing something wrong here?

Thanks again, Keir

allan

No that looks about right to me. Any chance you can give us a demo link, or perhaps a http://live.datatables.net example?

Thanks
Allan

kittles

Hey Allan- I have the same problem

[code]
$(document).ready(function() {
var oTable = $('#example').dataTable();
oTable.fnReloadAjax( '/get_data');
var refreshId = setInterval(function() {
oTable.fnReloadAjax( '/get_data', null, false);
}, 1000);
} );
[/code]

Also, does the fnReloadAjax pagination preserving option depend on having the fnStandingRedraw plugin? I figure it does, so I have the plugin, but it would probably be worth noting that somewhere if it is indeed necessary.

Thanks,
Pat

kittles

has anyone else had this problem?

Ronald

I've the same problem.
i execute the function(){oTable.fnReloadAjax();} on colorbox closed function.
Reload Ajax works fine, but the page is lost

Daimian

I had the same issue w/ 1.9.0

My solution, which may be a sloppy fix, was to change the following in the fnReloadAjax plugin code...
[code]
if ( typeof bStandingRedraw != 'undefined' && bStandingRedraw === true )
{
oSettings._iDisplayStart = iStart;
that.fnDraw( false );

}
[/code]
TO:
[code]
if ( typeof bStandingRedraw != 'undefined' && bStandingRedraw === true )
{
oSettings._iDisplayStart = iStart;
that.fnDraw( oSettings );

}
[/code]

Simply changing that.fnDraw(false) to that.fnDraw(oSettings) worked.

yabdab

@Damian

I tried that and still no joy. Any chance someone could post an example of this working?

allan

Can you (or anyone else with this issue) please link to an example that shows the problem? fnReloadAjax's standing redraw option should be working as far as I am aware.

Allan

yabdab

I just fixed my problem. Here are the two plugins I am using ...

Line 28

[code]

$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw )
{
if ( typeof sNewSource != 'undefined' && sNewSource != null )
{
oSettings.sAjaxSource = sNewSource;
}
this.oApi._fnProcessingDisplay( oSettings, true );
var that = this;
var iStart = oSettings._iDisplayStart;
var aData = [];

this.oApi._fnServerParams( oSettings, aData );

oSettings.fnServerData( oSettings.sAjaxSource, aData, function(json) {
/* Clear the old information from the table */
that.oApi._fnClearTable( oSettings );

/* Got the data - add it to the table */
var aData = (oSettings.sAjaxDataProp !== "") ?
that.oApi._fnGetObjectDataFn( oSettings.sAjaxDataProp )( json ) : json;

for ( var i=0 ; i

yabdab

And here is what I did to make jEditable fields stay on same page after editing too.

Line 6

[code]

/* Apply the jEditable handlers to the table */
oTable.$('td.title').editable( '/path/to/php_page', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
//oTable.fnUpdate( sValue, aPos[0], aPos[1] );
oTable.fnReloadAjax(); // update via ajax instead
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},
indicator : "saving…", // may change to a spinner
tooltip : "Double click to edit...",
event : "dblclick",
placeholder: ""
} );

[/code]

leonardolima

I think that I found a issue...

1) I'm using server side processing
2) I got one table with 41 rows
3) I droped one item directly into the database, and them used the fnReloadAjax
4) As result, the pagination got lost, no number was selected, the total display don´t got updated, and no row was shown in the table

Is possible to fix this?

Like, when I'm on the last page of pagination and just have one row.. them if this row is deleted, the pagination get to previous number automatically?

Thanks

dvnandover

I have the same problem.
I made changes according to suggestion from yabdab but now the function is not working anymore. I am getting error saying "Object doesn't support property or method 'fnReloadAjax'. It always happend to when i modify an existing api function. Does anyone know how to get around the error?

allan

Sounds like you haven't applied the plug-in, or there is another script error.

Allan

dvnandover

Got around with the api error problem (missing a coma at the end of the function) but the reload using fnReloadAjax still doesn't work and the pagination state are still unknown.
Here is part of the table definition:
// global variable
var oTable

oTable= $("#tblQueue").dataTable({
"sDom": '<"H"lip>rt',
"bJQueryUI": true,
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "two_button",
"bStateSave": true,
"sAjaxSource": "DataQuery.ashx",
"aaSorting": [[ 0, 'asc' ]],
...
});
setInterval(function() { RefreshQueue() }, 15000);

function RefreshQueue() {
oTable.fnReloadAjax(null, null, true);
}

dvnandover

Unbelievable but I was trying to use fnStandingRedraw() function by itself and it worked.
function RefreshQueue() {
oTable.fnStandingRedraw();
}

dthunsterblich

@ yabdab

Thanks for this excellent example. After spending lots of time searching for the right solution in the forum that post was the first one, that exactly fit my needs. The best thing about it is that I just need one line of code together with the plugins.

Best wishes,
dthunsterblich

rage10940

For any one still reading this today 3-25-13

all you have to do is :

[code]


$(document).ready(function()
{
var table1 = $('#waiting').dataTable({...............................................});

setInterval(function() {
table1.fnReloadAjax(null,null,true);
}, 1000);
});

[/code]

I have that on two tables on the same page, and pagination is no problem for me.