Skip to content

Paging plug-ins should be revamped #163

DataTables opened this Issue Mar 3, 2013 · 5 comments

2 participants


The paging plug-in method, while very flexible, is a pita at the moment. You need to define the display logic for the elements (classes, markup etc) as well as the logic for what pages should be displayed. I think these two should be separated.

Having them separate would mean that a display controller paging plug-in could very easily be defined (specific the the theming style - Bootstrap, Foundation, jQuery UI etc), and it wouldn't have the messy code for what buttons to show - it would just make a call to the paging buttons calculation method which would pass back an array of items to be rendered into a list.

This has the major effect of making it so much easier to include the 'first' and 'last' buttons along side the 'next' and 'previous' (or just first and last, or just next and previous etc) since at the moment we need to define entirely separate paging plug-ins just to get this simple change.

The paging button calculation plug-in would pass back something like:

[ 'previous', 0, 1, null, 4, 5, 6, null, 34, 35, 'next' ]


[ 'first', 3, 4, 5, 6, 7, 'last' ]


A new option pageButtons should be added to DataTables to allow initialisation control of this feature. You'd pass in something like:

pageButtons: [ 'previous', 'gaps', 'next' ]


pageButtons: [ 'first', 'traditional', 'last' ]

where gaps and traditional are the button calculation methods - themselves plug-ins.

Also need to consider how display of the built in button types (first etc) could be modified by the developer, so you can show arrows etc:

pageButtons: [ {type:'first', html:'«'}, 'gaps', '{type:'last': html:'»'} ]

This is addressed in commit 3ab5af5. There are still few things to update such as the CSS with somewhat more modern styling, but the core pagination code is now there and a big improvement on what came before.

@DataTables DataTables closed this Jun 9, 2013
@DataTables DataTables referenced this issue in DataTables/Plugins Jun 17, 2013

Fix two issues in ellipsis pagination #20

drakej commented Sep 16, 2014

I'm confused how this was addressed. I really would like to have some control over the number of buttons and whether the Previous/Next buttons get put in. Right now there's only pageType which is not nearly flexible enough to handle some special use cases.


I've still to write the dev documentation on these new plug-ins unfortunately. However the pagingType option provides all the options you'll probably need for the buttons.

For the number of numeric buttons shown use the $.fn.DataTable.ext.pager.numbers_length parameter. It can be set to 5 or higher, as long as it is an odd number.

For anything else a plug-in would need to be created. I'm going to write and get the documentation for that written by the end of the month.

drakej commented Sep 17, 2014

Ya I was able to figure it out. I realized after posting that this was a really old issue so most the functionality is there, it's just not implemented in the way this issue originally outlined.

My use case was to get the pagination to output less page buttons for smaller devices to avoid wrapping. I was able to do this by monkey patching the _numbers attribute and setting my own numbers_length parameter. I had to monkey patch _numbers only because anything less than 5 creates side effects in certain scenarios.


Out of interest - what was your patch? I've wondered before if I could get it down to 3, but never looked into it much.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.