Bootstrap pagination first and last buttons

devpriya

Hi,

I have a really long table with close to 10000 entries. So I want to be able to go to the last page using the standard last button that I used to get with the pagination. I am using your mod for Bootstrap 2 hence all I see are Previous and Next buttons. It would be really nice to have those First and Last buttons with the Bootstrap mod too.

Thanks,
Dev

allan

The pagination plug-in I built for bootstrap doesn't have first / last options but there is no reason why the plug-in can't be modified to add those options. The fnPageChange plug-in has a 'first' and 'last' option so it should just be a case of adding the two buttons and assigning an event handler that will call fnPageChange as needed.

Allan

photostu

Here is the modification to the extend method to add first and last buttons
[code]
/* Bootstrap style pagination control */
$.extend( $.fn.dataTableExt.oPagination, {
"bootstrap": {
"fnInit": function( oSettings, nPaging, fnDraw ) {
var oLang = oSettings.oLanguage.oPaginate;
var fnClickHandler = function ( e ) {
e.preventDefault();
if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
fnDraw( oSettings );
}
};

$(nPaging).addClass('pagination').append(
'' +
'← ' + oLang.sFirst + '' +
'← '+oLang.sPrevious+''+
'' + oLang.sNext + ' → ' +
'' + oLang.sLast + ' → ' +
''
);
var els = $('a', nPaging);
$(els[0]).bind('click.DT', { action: "first" }, fnClickHandler);
$(els[1]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
$(els[2]).bind('click.DT', { action: "next" }, fnClickHandler);
$(els[3]).bind('click.DT', { action: "last" }, fnClickHandler);
},

"fnUpdate": function ( oSettings, fnDraw ) {
var iListLength = 5;
var oPaging = oSettings.oInstance.fnPagingInfo();
var an = oSettings.aanFeatures.p;
var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);

if ( oPaging.iTotalPages < iListLength) {
iStart = 1;
iEnd = oPaging.iTotalPages;
}
else if ( oPaging.iPage <= iHalf ) {
iStart = 1;
iEnd = iListLength;
} else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {
iStart = oPaging.iTotalPages - iListLength + 1;
iEnd = oPaging.iTotalPages;
} else {
iStart = oPaging.iPage - iHalf + 1;
iEnd = iStart + iListLength - 1;
}

for ( i=0, iLen=an.length ; i

elena

Please I also want to add the first and last, I've tried the code above but no change or error. I've studied for guidance and instructions

Thank you very much

MlThRiL

I have modified the @photostu's code and it works fine for me. Here is it!

[code]
/* API method to get paging information */
$.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 )
};
}

/* Bootstrap style pagination control */
$.extend( $.fn.dataTableExt.oPagination, {
"bootstrap": {
"fnInit": function( oSettings, nPaging, fnDraw ) {
var oLang = oSettings.oLanguage.oPaginate;
var fnClickHandler = function ( e ) {
e.preventDefault();
if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
fnDraw( oSettings );
}
};

$(nPaging).addClass('pagination').append(
'' +
'← ' + oLang.sFirst + '' +
'← '+oLang.sPrevious+''+
'' + oLang.sNext + ' → ' +
'' + oLang.sLast + ' → ' +
''
);
var els = $('a', nPaging);
$(els[0]).bind('click.DT', { action: "first" }, fnClickHandler);
$(els[1]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
$(els[2]).bind('click.DT', { action: "next" }, fnClickHandler);
$(els[3]).bind('click.DT', { action: "last" }, fnClickHandler);
},

"fnUpdate": function ( oSettings, fnDraw ) {
var iListLength = 5;
var oPaging = oSettings.oInstance.fnPagingInfo();
var an = oSettings.aanFeatures.p;
var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);

if ( oPaging.iTotalPages < iListLength) {
iStart = 1;
iEnd = oPaging.iTotalPages;
}
else if ( oPaging.iPage <= iHalf ) {
iStart = 1;
iEnd = iListLength;
} else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {
iStart = oPaging.iTotalPages - iListLength + 1;
iEnd = oPaging.iTotalPages;
} else {
iStart = oPaging.iPage - iHalf + 1;
iEnd = iStart + iListLength - 1;
}

for ( i=0, iLen=an.length ; i

elena

syntax you succeed to display the first and last, but eliminate next and prev. huh, my day looking for this error, because I like a change. please understand I'm still new learning. please guide more specific so that I can show you everything, no missing / replaced. please.

I am from Indonesia, sorry if my english is not good..^_^

Thank you very much.

elena

oia is there a difference between "sPaginationType": "full_numbers" and "sPaginationType": "bootstrap"? because I tried the example that is using "sPaginationType": "full_numbers" and managed to show everything, but I apply in the template does not work and unfortunately charisma template creator never reply to my message ... huhuhu

noworriesinmd

To get first & last buttons
[code]
/* Default class modification */
$.extend( $.fn.dataTableExt.oStdClasses, {
"sWrapper": "dataTables_wrapper form-inline"
} );

/* API method to get paging information */
$.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 )
};
}

/* Bootstrap style pagination control */
$.extend( $.fn.dataTableExt.oPagination, {
"bootstrap": {
"fnInit": function( oSettings, nPaging, fnDraw ) {
var oLang = oSettings.oLanguage.oPaginate;
var fnClickHandler = function ( e ) {
e.preventDefault();
if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
fnDraw( oSettings );
}
};

$(nPaging).addClass('pagination').append(
''+
'' + oLang.sFirst + '' +
'' + oLang.sPrevious + '' +
'' + oLang.sNext + '' +
'' + oLang.sLast + '' +
''
);
var els = $('a', nPaging);
$(els[0]).bind( 'click.DT', { action: "first" }, fnClickHandler );
$(els[1]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
$(els[2]).bind( 'click.DT', { action: "next" }, fnClickHandler );
$(els[3]).bind( 'click.DT', { action: "last" }, fnClickHandler );
},

"fnUpdate": function ( oSettings, fnDraw ) {
var iListLength = 5;
var oPaging = oSettings.oInstance.fnPagingInfo();
var an = oSettings.aanFeatures.p;
var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);

if ( oPaging.iTotalPages < iListLength) {
iStart = 1;
iEnd = oPaging.iTotalPages;
}
else if ( oPaging.iPage <= iHalf ) {
iStart = 1;
iEnd = iListLength;
} else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {
iStart = oPaging.iTotalPages - iListLength + 1;
iEnd = oPaging.iTotalPages;
} else {
iStart = oPaging.iPage - iHalf + 1;
iEnd = iStart + iListLength - 1;
}

for ( i=0, iLen=an.length ; i

tristanvanbokkem

Are you sure the above code works? I am getting errors: Uncaught SyntaxError: Unexpected token < line 61

edit:
A i see, forum tries to rewrite fnDraw and sClass to HTML href. Edit line 23, 47, 74 and remove the href so it only says fnDraw and sClass.

kiarash

Here is a fixed version, it also only displays paging action only when more then 1 page is aval.
[code]
/* Default class modification */
$.extend($.fn.dataTableExt.oStdClasses, {
"sWrapper": "dataTables_wrapper form-inline"
});

/* API method to get paging information */
$.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)
};
};

/* Bootstrap style pagination control */
$.extend($.fn.dataTableExt.oPagination, {
"bootstrap": {
"fnInit": function (oSettings, nPaging, fnDraw) {
var oLang = oSettings.oLanguage.oPaginate;
var fnClickHandler = function (e) {
e.preventDefault();
if (oSettings.oApi._fnPageChange(oSettings, e.data.action)) {
fnDraw(oSettings);
}
};
if (Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength) > 1) {
$(nPaging).addClass('pagination').append(
'' +
'' + oLang.sFirst + '' +
'' + oLang.sPrevious + '' +
'' + oLang.sNext + '' +
'' + oLang.sLast + '' +
''
);
var els = $('a', nPaging);
$(els[0]).bind('click.DT', { action: "first" }, fnClickHandler);
$(els[1]).bind('click.DT', { action: "previous" }, fnClickHandler);
$(els[2]).bind('click.DT', { action: "next" }, fnClickHandler);
$(els[3]).bind('click.DT', { action: "last" }, fnClickHandler);
}
},

"fnUpdate": function (oSettings, fnDraw) {
var iListLength = 5;
var oPaging = oSettings.oInstance.fnPagingInfo();
var an = oSettings.aanFeatures.p;
var i, j, sClass, iStart, iEnd, iHalf = Math.floor(iListLength / 2);

if (oPaging.iTotalPages > 1) {
if (oPaging.iTotalPages < iListLength) {
iStart = 1;
iEnd = oPaging.iTotalPages;
}
else if (oPaging.iPage <= iHalf) {
iStart = 1;
iEnd = iListLength;
} else if (oPaging.iPage >= (oPaging.iTotalPages - iHalf)) {
iStart = oPaging.iTotalPages - iListLength + 1;
iEnd = oPaging.iTotalPages;
} else {
iStart = oPaging.iPage - iHalf + 1;
iEnd = iStart + iListLength - 1;
}

for (i = 0, iLen = an.length ; i < iLen ; i++) {
// Remove the middle elements
$('li:gt(1)', an[i]).filter(':not(.next,.last)').remove();

// Add the new list items and their event handlers
for (j = iStart ; j <= iEnd ; j++) {
sClass = (j == oPaging.iPage + 1) ? 'class="active"' : '';
$('' + j + '')
.insertBefore($('.next,.last', an[i])[0])
.bind('click', function (e) {
e.preventDefault();
oSettings._iDisplayStart = (parseInt($('a', this).text(), 10) - 1) * oPaging.iLength;
fnDraw(oSettings);
});
}

// Add / remove disabled classes from the static elements
if (oPaging.iPage === 0) {
$('.first,.prev', an[i]).addClass('disabled');
} else {
$('.first,.prev', an[i]).removeClass('disabled');
}

if (oPaging.iPage === oPaging.iTotalPages - 1 || oPaging.iTotalPages === 0) {
$('.next,.last', an[i]).addClass('disabled');
} else {
$('.next,.last', an[i]).removeClass('disabled');
}
}
}
}
}
});
[/code]

allan

Quick update on this - I recently committed a change for DataTables 1.10 which will make this much much easier in future. I've split out the logic which defines which buttons should be shown from how the buttons are actually rendered. This means that adding new buttons such as first and last will be trivial in 1.10.

Allan