Getting value of current page in datatables?
Getting value of current page in datatables?
streetlight
Posts: 26Questions: 0Answers: 0
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!
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!
This discussion has been closed.
Replies
v.1.10 will introduce a new method for doing it.
Allan
[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!
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]
You can use the iDisplayStart init option to tell DataTables what row to show on first draw.
Allan
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]
[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
Thank you for your help!