Page X of Y pagination

stormblade

Hey all,

I was looking for a way to customize the pagination to be Page x of y instead of the Showing x to y of z entries. And just the four button navigation. Looking over the documentation it looks like I need to create a custom pagination control and I saw the examples. I couldn't really tell which would be suitable for my needs as a base because I couldn't get the live example to work properly. Every one seems to render the same.

So can anyone help me? Or point me to where someone has already done this? I can't imagine no one has needed it to read this way.

Thanks in advance.

allan

Table information can be controlled using the sInfo language parameter: http://datatables.net/ref#sInfo

Four button pagination plug-in is available here: http://datatables.net/plug-ins/pagination#four_button

Allan

stormblade

LOL thank you. For some reason I was confusing the table information with the pagination information. I thought I would have to create a plug-in just to get it to say Page x of y. I'm actually fine with the default full numbers pagination plug-in.

Thanks again.

stormblade

Hmm looks like the _START_ and _END_ are not the pages but the indexes. How do I convert this to Pages. Do I need to do this myself or am I missing something.

allan

Ah yes - you are quite right. What you will probably need to do is use fnInfoCallback ( http://datatables.net/ref#fnInfoCallback ) and the fnPagingInfo plug-in: http://datatables.net/plug-ins/api#fnPagingInfo . With them you'll have all the information needed and a way to set the text in the display element.

Allan

stormblade

Ah that looks like exactly what I need. I'm having some trouble calling the plug-in though. I see what it's doing and I could just do that calculation right in the fnInfoCallback function but I kinda wanted to do it the way the example showed but it's not giving me access to the fnPagingInfo function.

When I do it like the example it tells me that fnInfo is not a function. I try fnPagingInfo and get the same so I did a console.log(this) to see what I was working with and I do not see that function anywhere.

allan

Ah damn - sorry about that. There is a bug in DataTables that is stopping that from working quite as it should :-(.

I've just committed a fix for this into the 1.9 development version (shortly to be released as 1.9.beta.1). You can get the latest version from here: https://github.com/DataTables/DataTables/blob/1_9_DEV/media/js/jquery.dataTables.js

With that, this is what is needed to get the table information to look like what you want:

[code]
$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
{
  return {
    "iStart":         oSettings._iDisplayStart,
    "iEnd":           oSettings.fnDisplayEnd(),
    "iLength":        oSettings._iDisplayLength,
    "iTotal":         oSettings.fnRecordsTotal(),
    "iFilteredTotal": oSettings.fnRecordsDisplay(),
    "iPage":          Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
    "iTotalPages":    Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
  };
}

$(document).ready(function() {
$('#example').dataTable( {
"fnInfoCallback": function ( oSettings, iStart, iEnd, iMax, iTotal, sPre ) {
var o = this.fnPagingInfo();
return "Page "+(o.iPage+1)+" of "+o.iTotalPages;
}
} );
} );
[/code]

Regards,
Allan

stormblade

No worries. Thanks much :)

ssantos

Hi!

regarding fnInfoCallBack, is there any way to explicitly call this function? i.e. adding a new row and update the "x elements found" message.

Great work by the way!

allan

The function will be called automatically when the table does a redraw - which is does when you use the fnAddData API method to add a new row. Is that not working for you?

Allan