Getting value of current page in datatables?

streetlight

Hey all,

I'm trying to get the value of the current page of the user in datatables. My goal is to have the pagination not refresh after an edit (which reloads the table), and fnStandingRedraw and bStateSave aren't working for me -- so I figured I'd read the page number, clear and redraw the table, then send the user back to where they were at in the first place.

Does anyone have an opinions of how to get this working? Thank you for your help!

allan

Currently this plug-in is the way to do it: http://datatables.net/plug-ins/api#fnPagingInfo .

v.1.10 will introduce a new method for doing it.

Allan

streetlight

Wonderful! Can you run this function anywhere else beside fnDrawCallback? For instance, when I put it in my paging function I get this error:

[code]TypeError: this.fnPagingInfo is not a function[/code]

I get the same one when trying to put it in the reload function. I may not be understanding the scope of this plugin?

Thank you for your help and for continuing to point me in the right direction!

streetlight

Nevermind, I think that may have been an stupid mistake! I had to (obviously) change 'this' in the example to 'oTable'. Sorry for the confusion!

streetlight

Is there some sort of Datatables functionality that can take this value, after a reload, and use it load to this value?

I'm trying to get this value on change, reload the table, then send the user to this page again. Here's the function I'm working with:

[code]
function reloadTable(){
$('#tenant_name').html(getTenantName());

// What page am I on?
var whatPage = oTable.fnPagingInfo().iPage;
alert(whatPage);


//Reload the Table

oTable.fnClearTable();

toggleMenu();


$.getJSON("", function(data){


var aaData = new Array();

for(lrow in data["aaData"]){
var row = new Array();

if('' == '${curCol.inputtype}')
row.push(data["aaData"][lrow][${colLoop.index}]);
else
row.push('');
row.push(data["aaData"][lrow][${colLoop.index + 1}]);

aaData.push(row);
}
oTable.fnAddData(aaData);



oTable.fnAddData(data["aaData"]);



});

oTable.fnDraw();

// Bring me back, man!

oTable.fnPagingInfo().iPage;



}
[/code]

allan

It rather sounds like what you want is provided by state saving: bStateSave ? Is that not what you want?

You can use the iDisplayStart init option to tell DataTables what row to show on first draw.

Allan

streetlight

bStateSave does not work for some reason for me -- it keeps the pagination style, but it does not keep the user at the page.

Won't iDisplayStart not take into account any changes to the pagination style or shifts made before the reload? I guess I would have to make something that took into account the index of the last items seen and dyamically change this??

Is there no way to send the user to the PagingInfo index that I've picked up?

As for bStateSave, here's my initialzation, if it helps at all with troubleshooting?

[code]

oTable = $('#${tableName}_grid').dataTable( {
"bProcessing": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
bSort: true,
bFilter: true,
bJQueryUI: true,
bProcessing: true,
bAutoWidth: true,
bInfo: true,
bLengthChange: true,
aLengthMenu: menulength,
iDisplayLength: displaystart,
"aaSorting": [],
"bStateSave": true,

"fnDrawCallback" : function(){
//resetSelected();
if(oTable != null) {
tablepopups(); restrictCellWidth();
//clearSelectedNames();
if ($('#Tenant_grid')) {
customClasses();
};
}

},

aoColumns: [
/* The columnTO will contain the sortable property which is used to make a column sortable or not.
* If the columnTOs are empty, then the columns are taken from columns *
* */


{sName:'${curCol}', sTitle: '${curCol}', sDefaultContent: "null", sType:"html" },




{sName:'${curCol.columnName}', sTitle: '${curCol.columnName}',sType:"html", sDefaultContent: "null", "bSortable": ${curCol.sortable} },


{sName: 'ID', sTitle:'ID', bVisible:false, bSearchable:false }
],
aaData:[[


'',




'',


'']

],
"oLanguage": {

"sProcessing": "",
"sLengthMenu": "",
"sZeroRecords": "",
"sInfo": "",
"sInfoEmpty": "",
"sInfoFiltered": "",
"sInfoPostFix": "",
"sSearch": "",
"oPaginate": {
"sFirst": "",
"sPrevious": "",
"sNext": "",
"sLast": ""
}} ,
aoColumnDefs:[{sClass:"color_col", aTargets:['color']}]
} );
[/code]

streetlight

I would love to get bStateSave working, as that's pretty much the functionality I'm trying to replicate! I'm on the latest version of DT as well, if that helps!

streetlight

Also, thank you so much for helping me Allan. If anyone else has a theory to try, please help as well!

streetlight

Okay, so I now have the situation working in Firefox and IE9, but for some reason it does not work in webkit browsers. Here is the reload function how it stands:

[code]
function reloadTable(){
$('#tenant_name').html(getTenantName());

// What page am I on?
var whatPage = oTable.fnPagingInfo().iPage;
alert(whatPage);


//Reload the Table

oTable.fnClearTable();

toggleMenu();


$.getJSON("", function(data){


var aaData = new Array();

for(lrow in data["aaData"]){
var row = new Array();

if('' == '${curCol.inputtype}')
row.push(data["aaData"][lrow][${colLoop.index}]);
else
row.push('');
row.push(data["aaData"][lrow][${colLoop.index + 1}]);

aaData.push(row);
}
oTable.fnAddData(aaData);



oTable.fnAddData(data["aaData"]);



});

oTable.fnDraw();

alert(whatPage)

oTable.fnPageChange(whatPage);

alert(whatPage)


}
[/code]

and here is the editing function that is calling it:

[code]
function editRecord(url,iid){

qstr = '';
qstr += url+'?recordName='+encodeURIComponent(iid);
$('').dialog(
{
minHeight:620,
minWidth:870,
modal:true,
resizable:false,
beforeClose:function(event,ui){
$(this).remove();
},
closeOnEscape: false,
close:function(){
// Commenting this out stops the table from reloading after an edit

reloadTable();

},
open: function(event, ui) {
$(this).parent().children().children('.ui-dialog-titlebar-close').hide();
}

});
}
[/code]

Any idea on why it doesn't work in webkit browsers?

allan

Can you link me to a page where you have bStateSave enabled and it is not working? That seems to be the fundamental issue.

Allan

streetlight

Everything has been built locally, so I can't send over a link. However! I did figure out if you put a small setTimeout on the oTable.fnPageChange function, it does the trick for some reason.

Thank you for your help!