fix wandering pagination buttons

lenbo41

When using "full_numbers", DataTables will display the pagination control in this default format:
[First] [Previous] [1] [2] [3] [4] [5] [Next] [Last]

Repeatedly clicking Next through the 10th page causes an undesirable shift of the Next button to the right. To avoid the shift, you can include the following fnDrawCallback function to 0-pad buttons 1 thru 9. You can also use this callback function to easily change the default button labels to VCR-like buttons, etc.

[code]

$(document).ready(function() {
$('#dynamic').html( '' );
var oTable = $('#pipeline').dataTable( {

"bPaginate": true, //Disable the vertical scroll bar in favor of pagination control.
"sPaginationType": "full_numbers", //Display the pagination control in this default format: [First] [Previous] [1] [2] [3] [4] [5] [Next] [Last]
"fnDrawCallback": function () { //After table is redrawn, customize the pagination control to consistently show 2-digit page numbers to reduce button wandering near the 10th page.
$('.paginate_button, .paginate_active').each(function() {
var pgNbr = $(this).text();
if (pgNbr.length==1 && pgNbr >= '1' && pgNbr <= '9' )
$(this).prepend('0');
else {
if (pgNbr == 'First') $(this).text('|<');
if (pgNbr == 'Previous') $(this).text(' <');
if (pgNbr == 'Next') $(this).text(' >');
if (pgNbr == 'Last') $(this).text('>|');
}
});

[/code]

allan

Can you link me to a test page showing the problem please? I'm not sure I entirely understand the issue.

Allan

allan

Oh also - use the i18n options to change the language strings for the paging buttons if you want to modify their test - that's what those options are there for! :-)

Allan

lenbo41

For an example of the problem, please see http://brainotics.net/datatables/examples/server_side/big_pipeline.html

Keep the default of "Show 10 entries", then quickly hit the Next button repeatedly until you get to page 10. Notice how the buttons shift position when you pass by the 10th page. The buttons will shift left or riht depending if you are clicking Next or Previous). This makes it difficult to fast-click through the data because you must reposition your mouse as the buttons wander. My fix immobilizes the buttons byt left-padding the first 9 pages with a "0".

BTW, thanks for the i18n tip.

You have created an excellent data grid. Its fast, flexible, easy to implement and most importantly, impresses our customers !