sipwise
/
ngcp-panel
mirror of https://github.com/sipwise/ngcp-panel.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Implement better pagination for datatables.

Browse Source 
The previous implementation seems to got lost somewhere.
agranig/1_0_subfix
Andreas Granig 13 years ago
parent ccc4c3192d
commit 2e849d131a
4 changed files with 138 additions and 91 deletions
Show Stats Download Patch File Download Diff File

4
share/static/css/main.css
Unescape View File

@ -213,6 +213,10 @@ div.dataTables_paginate {
margin: 0; margin: 0;
} }
div.dataTables_paginate a.btn {
margin-left: 3px;
}
/* --------- /* ---------
Datatable Field (inside modal) Datatable Field (inside modal)
------------*/ ------------*/

223
share/static/js/libs/datatables-bootstrap-paging.js
Unescape View File

@ -1,91 +1,132 @@
$.extend($.fn.dataTableExt.oStdClasses, {
/* API method to get paging information */ 'sPageEllipsis': 'paginate_ellipsis',
$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings ) 'sPageNumber': 'paginate_number',
{ 'sPageNumbers': 'paginate_numbers'
return { });
"iStart": oSettings._iDisplayStart,
"iEnd": oSettings.fnDisplayEnd(), $.fn.dataTableExt.oPagination.bootstrap = {
"iLength": oSettings._iDisplayLength, 'oDefaults': {
"iTotal": oSettings.fnRecordsTotal(), 'iShowPages': 5
"iFilteredTotal": oSettings.fnRecordsDisplay(), },
"iPage": Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ), 'fnClickHandler': function(e) {
"iTotalPages": Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength ) var fnCallbackDraw = e.data.fnCallbackDraw,
}; oSettings = e.data.oSettings,
} sPage = e.data.sPage;
/* Bootstrap style pagination control */ if ($(this).is('[disabled]')) {
$.extend( $.fn.dataTableExt.oPagination, { return false;
"bootstrap": { }
"fnInit": function( oSettings, nPaging, fnDraw ) {
var oLang = oSettings.oLanguage.oPaginate; oSettings.oApi._fnPageChange(oSettings, sPage);
var fnClickHandler = function ( e ) { fnCallbackDraw(oSettings);
e.preventDefault();
if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) { return true;
fnDraw( oSettings ); },
} // fnInit is called once for each instance of pager
}; 'fnInit': function(oSettings, nPager, fnCallbackDraw) {
var oClasses = oSettings.oClasses,
$(nPaging).addClass('pagination').append( oLang = oSettings.oLanguage.oPaginate,
'<ul class="pull-right">'+ that = this;
'<li class="prev disabled"><a href="#">&larr;</a></li>'+
'<li class="next disabled"><a href="#">&rarr;</a></li>'+ var iShowPages = oSettings.oInit.iShowPages || this.oDefaults.iShowPages,
'</ul>' iShowPagesHalf = Math.floor(iShowPages / 2);
);
var els = $('a', nPaging); $.extend(oSettings, {
$(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler ); _iShowPages: iShowPages,
$(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler ); _iShowPagesHalf: iShowPagesHalf,
}, });
"fnUpdate": function ( oSettings, fnDraw ) { var oFirst = $('<a class="btn btn-small paging_first">&lArr;</a>'),
var iListLength = 5; oPrevious = $('<a class="btn btn-small paging_prev">&larr;</a>'),
var oPaging = oSettings.oInstance.fnPagingInfo(); oNumbers = $('<span class="paging_num"></span>'),
var an = oSettings.aanFeatures.p; oNext = $('<a class="btn btn-small paging_next">&rarr;</a>'),
var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2); oLast = $('<a class="btn btn-small paging_last">&rArr;</a>');
if ( oPaging.iTotalPages < iListLength) { oFirst.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': 'first' }, that.fnClickHandler);
iStart = 1; oPrevious.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': 'previous' }, that.fnClickHandler);
iEnd = oPaging.iTotalPages; oNext.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': 'next' }, that.fnClickHandler);
} oLast.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': 'last' }, that.fnClickHandler);
else if ( oPaging.iPage <= iHalf ) {
iStart = 1; // Draw
iEnd = iListLength; $(nPager).append(oFirst, oPrevious, oNumbers, oNext, oLast);
} else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) { },
iStart = oPaging.iTotalPages - iListLength + 1; // fnUpdate is only called once while table is rendered
iEnd = oPaging.iTotalPages; 'fnUpdate': function(oSettings, fnCallbackDraw) {
} else { var oClasses = oSettings.oClasses,
iStart = oPaging.iPage - iHalf + 1; that = this;
iEnd = iStart + iListLength - 1;
} var tableWrapper = oSettings.nTableWrapper;
for ( i=0, iLen=an.length ; i<iLen ; i++ ) { // Update stateful properties
// Remove the middle elements this.fnUpdateState(oSettings);
$('li:gt(0)', an[i]).filter(':not(:last)').remove();
if (oSettings._iCurrentPage === 1) {
// Add the new list items and their event handlers $('.paging_first', tableWrapper).attr('disabled', true);
for ( j=iStart ; j<=iEnd ; j++ ) { $('.paging_prev', tableWrapper).attr('disabled', true);
sClass = (j==oPaging.iPage+1) ? 'class="active"' : ''; } else {
$('<li '+sClass+'><a href="#">'+j+'</a></li>') $('.paging_first', tableWrapper).removeAttr('disabled');
.insertBefore( $('li:last', an[i])[0] ) $('.paging_prev', tableWrapper).removeAttr('disabled');
.bind('click', function (e) { }
e.preventDefault();
oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength; if (oSettings._iTotalPages === 0 || oSettings._iCurrentPage === oSettings._iTotalPages) {
fnDraw( oSettings ); $('.paging_next', tableWrapper).attr('disabled', true);
} ); $('.paging_last', tableWrapper).attr('disabled', true);
} } else {
$('.paging_next', tableWrapper).removeAttr('disabled');
// Add / remove disabled classes from the static elements $('.paging_last', tableWrapper).removeAttr('disabled');
if ( oPaging.iPage === 0 ) { }
$('li:first', an[i]).addClass('disabled');
} else { var i, oNumber, oNumbers = $('.paging_num', tableWrapper);
$('li:first', an[i]).removeClass('disabled');
} // Erase
oNumbers.html('');
if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
$('li:last', an[i]).addClass('disabled'); for (i = oSettings._iFirstPage; i <= oSettings._iLastPage; i++) {
} else { oNumber = $('<a class="btn btn-small">' + oSettings.fnFormatNumber(i) + '</a>');
$('li:last', an[i]).removeClass('disabled');
} if (oSettings._iCurrentPage === i) {
} oNumber.attr('active', true).attr('disabled', true).addClass('btn-primary');
} } else {
} oNumber.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': i - 1 }, that.fnClickHandler);
} ); }
// Draw
oNumbers.append(oNumber);
}
// Add ellipses
if (1 < oSettings._iFirstPage) {
oNumbers.prepend('<span class="' + oClasses.sPageEllipsis + '">...</span>');
}
if (oSettings._iLastPage < oSettings._iTotalPages) {
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
});
}
};

1
share/templates/helpers/datatables.tt
Unescape View File

@ -20,6 +20,7 @@ $(document).ready(function() {
"bSort": true, "bSort": true,
"bInfo": true, "bInfo": true,
"iDisplayLength": 5, "iDisplayLength": 5,
'iShowPages': 5,
"sAjaxSource": "[% helper.ajax_uri %]", "sAjaxSource": "[% helper.ajax_uri %]",
[% IF helper.column_sort -%] [% IF helper.column_sort -%]
"aaSorting": [ "aaSorting": [

1
share/templates/helpers/datatables_field.tt
Unescape View File

@ -23,6 +23,7 @@ $(document).ready(function() {
"bSort": true, "bSort": true,
"bInfo": true, "bInfo": true,
"iDisplayLength": 4, "iDisplayLength": 4,
'iShowPages': 5,
"sAjaxSource": "[% ajax_src %]", "sAjaxSource": "[% ajax_src %]",
"aoColumns": [ "aoColumns": [

Write Preview
Loading…
Cancel
Save