Azaki
/
Plugins
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #13 from davidkennedy85/master

Browse Source 
Added support for multiple pagination controls on the same page...
pull/14/head
Allan Jardine 12 years ago
parent b0f5a921ab b945ef47d6
commit 90fd600aba
1 changed files with 84 additions and 79 deletions
Show Stats Download Patch File Download Diff File

161
pagination/ellipses.js
Unescape View File

@ -1,12 +1,11 @@
/* /*
* This plug-in adds another pagination option called ellipses. * This plug-in adds another pagination option similar to full_numbers,
* This will render the pagination control similar to the full_numbers option, * except it adds ellipses around the page numbers when applicable.
* except it will add ellipses around the page numbers when applicable.
* You can set how many page numbers should be displayed with the iShowPages option. * You can set how many page numbers should be displayed with the iShowPages option.
* This plug-in also extends the oClasses object with the following properties: * This plug-in extends the oStdClasses object with the following properties:
* sPageEllipsis, sPageNumber and sPageNumbers. * sPageEllipsis, sPageNumber and sPageNumbers.
* Finally, this plug-in extends the oSettings object with the following properties: * It also extends the oSettings object with the following properties:
* _iShowPages, _iCurrentPage, _iTotalPages, _iShowPagesHalf, _iFirstPage and _iLastPage. * _iShowPages, _iShowPagesHalf, _iCurrentPage, _iTotalPages, _iFirstPage and _iLastPage.
* *
* @name Ellipses * @name Ellipses
* @anchor ellipses * @anchor ellipses
@ -15,11 +14,13 @@
* $('#my-table').dataTable({ * $('#my-table').dataTable({
* // Optional usage of extended oSettings object * // Optional usage of extended oSettings object
* 'fnInfoCallback': function(oSettings) { * 'fnInfoCallback': function(oSettings) {
* // Update stateful properties
* $.fn.dataTableExt.oPagination.ellipses.fnUpdateState(oSettings);
* return 'Viewing page ' + oSettings._iCurrentPage + ' of ' + oSettings._iTotalPages; * return 'Viewing page ' + oSettings._iCurrentPage + ' of ' + oSettings._iTotalPages;
* }, * },
* // Optional usage of iShowPages option * // Optional usage of iShowPages option
* 'iShowPages': 15, * 'iShowPages': 15,
* // This is the only required line * // This is the only required option
* 'sPaginationType': 'ellipses' * 'sPaginationType': 'ellipses'
* }); * });
*/ */
@ -30,13 +31,10 @@ $.extend($.fn.dataTableExt.oStdClasses, {
'sPageNumbers': 'paginate_numbers' 'sPageNumbers': 'paginate_numbers'
}); });
$.extend($.fn.dataTableExt.oJUIClasses, {
'sPageEllipsis': 'paginate_ellipsis',
'sPageNumber': 'paginate_number',
'sPageNumbers': 'paginate_numbers'
});
$.fn.dataTableExt.oPagination.ellipses = { $.fn.dataTableExt.oPagination.ellipses = {
'oDefaults': {
'iShowPages': 5
},
'fnClickHandler': function(e) { 'fnClickHandler': function(e) {
var fnCallbackDraw = e.data.fnCallbackDraw, var fnCallbackDraw = e.data.fnCallbackDraw,
oSettings = e.data.oSettings, oSettings = e.data.oSettings,
@ -48,105 +46,112 @@ $.fn.dataTableExt.oPagination.ellipses = {
oSettings.oApi._fnPageChange(oSettings, sPage); oSettings.oApi._fnPageChange(oSettings, sPage);
fnCallbackDraw(oSettings); fnCallbackDraw(oSettings);
return true; return true;
}, },
// fnInit is called once for each instance of pager
'fnInit': function(oSettings, nPager, fnCallbackDraw) { 'fnInit': function(oSettings, nPager, fnCallbackDraw) {
var oClasses = oSettings.oClasses, var oClasses = oSettings.oClasses,
oLang = oSettings.oLanguage.oPaginate, oLang = oSettings.oLanguage.oPaginate,
that = this; that = this;
this.nPager = $(nPager); var iShowPages = oSettings.oInit.iShowPages || this.oDefaults.iShowPages,
iShowPagesHalf = Math.floor(iShowPages / 2);
this.nFirst = $('<a class="' + oClasses.sPageButton + ' ' + oClasses.sPageFirst + '">' + oLang.sFirst + '</a>'); $.extend(oSettings, {
this.nPrevious = $('<a class="' + oClasses.sPageButton + ' ' + oClasses.sPagePrevious + '">' + oLang.sPrevious + '</a>'); _iShowPages: iShowPages,
this.nNext = $('<a class="' + oClasses.sPageButton + ' ' + oClasses.sPageNext + '">' + oLang.sNext + '</a>'); _iShowPagesHalf: iShowPagesHalf,
this.nLast = $('<a class="' + oClasses.sPageButton + ' ' + oClasses.sPageLast + '">' + oLang.sLast + '</a>'); });
this.nFirst.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': 'first' }, that.fnClickHandler); var oFirst = $('<a class="' + oClasses.sPageButton + ' ' + oClasses.sPageFirst + '">' + oLang.sFirst + '</a>'),
this.nPrevious.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': 'previous' }, that.fnClickHandler); oPrevious = $('<a class="' + oClasses.sPageButton + ' ' + oClasses.sPagePrevious + '">' + oLang.sPrevious + '</a>'),
this.nNext.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': 'next' }, that.fnClickHandler); oNumbers = $('<span class="' + oClasses.sPageNumbers + '"></span>'),
this.nLast.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': 'last' }, that.fnClickHandler); oNext = $('<a class="' + oClasses.sPageButton + ' ' + oClasses.sPageNext + '">' + oLang.sNext + '</a>'),
oLast = $('<a class="' + oClasses.sPageButton + ' ' + oClasses.sPageLast + '">' + oLang.sLast + '</a>');
this.nNumbers = $('<span class="' + oClasses.sPageNumbers + '"></span>'); oFirst.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': 'first' }, that.fnClickHandler);
oPrevious.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': 'previous' }, that.fnClickHandler);
oNext.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': 'next' }, that.fnClickHandler);
oLast.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': 'last' }, that.fnClickHandler);
// Render // Draw
this.nPager.append(this.nFirst, this.nPrevious, this.nNumbers, this.nNext, this.nLast); $(nPager).append(oFirst, oPrevious, oNumbers, oNext, oLast);
}, },
// fnUpdate is only called once while table is rendered
'fnUpdate': function(oSettings, fnCallbackDraw) { 'fnUpdate': function(oSettings, fnCallbackDraw) {
var oClasses = oSettings.oClasses, var oClasses = oSettings.oClasses,
that = this; that = this;
// If iShowPages wasn't included in initialisation options, // Update stateful properties
// use default value in global object this.fnUpdateState(oSettings);
var iShowPages = oSettings.oInit.iShowPages || 5;
var iCurrentPage = Math.ceil((oSettings._iDisplayStart + 1) / oSettings._iDisplayLength), if (oSettings._iCurrentPage === 1) {
iTotalPages = Math.ceil(oSettings.fnRecordsTotal() / oSettings._iDisplayLength), $('.' + oClasses.sPageFirst).attr('disabled', true);
iShowPagesHalf = Math.floor(iShowPages / 2), $('.' + oClasses.sPagePrevious).attr('disabled', true);
iFirstPage = iCurrentPage - iShowPagesHalf,
iLastPage = iCurrentPage + iShowPagesHalf;
if (iTotalPages < iShowPages) {
iFirstPage = 1;
iLastPage = iTotalPages;
} else if (iFirstPage < 1) {
iFirstPage = 1;
iLastPage = iShowPages;
} else if (iLastPage > iTotalPages) {
iFirstPage = (iTotalPages - iShowPages) + 1;
iLastPage = iTotalPages;
}
// Add these properties to oSettings so we can use them later
$.extend(oSettings, {
_iShowPages: iShowPages,
_iCurrentPage: iCurrentPage,
_iTotalPages: iTotalPages,
_iShowPagesHalf: iShowPagesHalf,
_iFirstPage: iFirstPage,
_iLastPage: iLastPage
});
if (iCurrentPage === 1) {
this.nFirst.attr('disabled', true);
this.nPrevious.attr('disabled', true);
} else { } else {
this.nFirst.removeAttr('disabled'); $('.' + oClasses.sPageFirst).removeAttr('disabled');
this.nPrevious.removeAttr('disabled'); $('.' + oClasses.sPagePrevious).removeAttr('disabled');
} }
if (iCurrentPage === iTotalPages) { if (oSettings._iCurrentPage === oSettings._iTotalPages) {
this.nNext.attr('disabled', true); $('.' + oClasses.sPageNext).attr('disabled', true);
this.nLast.attr('disabled', true); $('.' + oClasses.sPageLast).attr('disabled', true);
} else { } else {
this.nNext.removeAttr('disabled'); $('.' + oClasses.sPageNext).removeAttr('disabled');
this.nLast.removeAttr('disabled'); $('.' + oClasses.sPageLast).removeAttr('disabled');
} }
// Erase and render var i, oNumber, oNumbers = $('.' + oClasses.sPageNumbers);
this.nNumbers.html('');
var i, nNumber; // Erase
oNumbers.html('');
for (i = iFirstPage; i <= iLastPage; i++) { for (i = oSettings._iFirstPage; i <= oSettings._iLastPage; i++) {
nNumber = $('<a class="' + oClasses.sPageButton + ' ' + oClasses.sPageNumber + '">' + oSettings.fnFormatNumber(i) + '</a>'); oNumber = $('<a class="' + oClasses.sPageButton + ' ' + oClasses.sPageNumber + '">' + oSettings.fnFormatNumber(i) + '</a>');
if (iCurrentPage === i) { if (oSettings._iCurrentPage === i) {
nNumber.attr('active', true).attr('disabled', true); oNumber.attr('active', true).attr('disabled', true);
} else { } else {
nNumber.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': i - 1 }, that.fnClickHandler); oNumber.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': i - 1 }, that.fnClickHandler);
} }
this.nNumbers.append(nNumber); // Draw
oNumbers.append(oNumber);
} }
// Add ellipses // Add ellipses
if (1 < iFirstPage) { if (1 < oSettings._iFirstPage) {
this.nNumbers.prepend('<span class="' + oClasses.sPageEllipsis + '">...</span>'); oNumbers.prepend('<span class="' + oClasses.sPageEllipsis + '">...</span>');
} }
if (iLastPage < iTotalPages) { if (oSettings._iLastPage < oSettings._iTotalPages) {
this.nNumbers.append('<span class="' + oClasses.sPageEllipsis + '">...</span>'); oNumbers.append('<span class="' + oClasses.sPageEllipsis + '">...</span>');
}
},
// fnUpdateState used to be part of fnUpdate
// The reason for moving is so we can access current state info before fnUpdate is called
'fnUpdateState': function(oSettings) {
var iCurrentPage = Math.ceil((oSettings._iDisplayStart + 1) / oSettings._iDisplayLength),
iTotalPages = Math.ceil(oSettings.fnRecordsTotal() / oSettings._iDisplayLength),
iFirstPage = iCurrentPage - oSettings._iShowPagesHalf,
iLastPage = iCurrentPage + oSettings._iShowPagesHalf;
if (iTotalPages < oSettings._iShowPages) {
iFirstPage = 1;
iLastPage = iTotalPages;
} else if (iFirstPage < 1) {
iFirstPage = 1;
iLastPage = oSettings._iShowPages;
} else if (iLastPage > iTotalPages) {
iFirstPage = (iTotalPages - oSettings._iShowPages) + 1;
iLastPage = iTotalPages;
} }
$.extend(oSettings, {
_iCurrentPage: iCurrentPage,
_iTotalPages: iTotalPages,
_iFirstPage: iFirstPage,
_iLastPage: iLastPage
});
} }
}; };
Write Preview
Loading…
Cancel
Save