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;
}
div.dataTables_paginate a.btn {
margin-left: 3px;
}
/* ---------
Datatable Field (inside modal)
------------*/

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

@ -1,91 +1,132 @@
$.extend($.fn.dataTableExt.oStdClasses, {
'sPageEllipsis': 'paginate_ellipsis',
'sPageNumber': 'paginate_number',
'sPageNumbers': 'paginate_numbers'
});
/* 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(
'<ul class="pull-right">'+
'<li class="prev disabled"><a href="#">&larr;</a></li>'+
'<li class="next disabled"><a href="#">&rarr;</a></li>'+
'</ul>'
);
var els = $('a', nPaging);
$(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
$(els[1]).bind( 'click.DT', { action: "next" }, 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<iLen ; i++ ) {
// Remove the middle elements
$('li:gt(0)', an[i]).filter(':not(:last)').remove();
// Add the new list items and their event handlers
for ( j=iStart ; j<=iEnd ; j++ ) {
sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';
$('<li '+sClass+'><a href="#">'+j+'</a></li>')
.insertBefore( $('li: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 ) {
$('li:first', an[i]).addClass('disabled');
} else {
$('li:first', an[i]).removeClass('disabled');
}
if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
$('li:last', an[i]).addClass('disabled');
} else {
$('li:last', an[i]).removeClass('disabled');
}
}
}
}
} );
$.fn.dataTableExt.oPagination.bootstrap = {
'oDefaults': {
'iShowPages': 5
},
'fnClickHandler': function(e) {
var fnCallbackDraw = e.data.fnCallbackDraw,
oSettings = e.data.oSettings,
sPage = e.data.sPage;
if ($(this).is('[disabled]')) {
return false;
}
oSettings.oApi._fnPageChange(oSettings, sPage);
fnCallbackDraw(oSettings);
return true;
},
// fnInit is called once for each instance of pager
'fnInit': function(oSettings, nPager, fnCallbackDraw) {
var oClasses = oSettings.oClasses,
oLang = oSettings.oLanguage.oPaginate,
that = this;
var iShowPages = oSettings.oInit.iShowPages || this.oDefaults.iShowPages,
iShowPagesHalf = Math.floor(iShowPages / 2);
$.extend(oSettings, {
_iShowPages: iShowPages,
_iShowPagesHalf: iShowPagesHalf,
});
var oFirst = $('<a class="btn btn-small paging_first">&lArr;</a>'),
oPrevious = $('<a class="btn btn-small paging_prev">&larr;</a>'),
oNumbers = $('<span class="paging_num"></span>'),
oNext = $('<a class="btn btn-small paging_next">&rarr;</a>'),
oLast = $('<a class="btn btn-small paging_last">&rArr;</a>');
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);
// Draw
$(nPager).append(oFirst, oPrevious, oNumbers, oNext, oLast);
},
// fnUpdate is only called once while table is rendered
'fnUpdate': function(oSettings, fnCallbackDraw) {
var oClasses = oSettings.oClasses,
that = this;
var tableWrapper = oSettings.nTableWrapper;
// Update stateful properties
this.fnUpdateState(oSettings);
if (oSettings._iCurrentPage === 1) {
$('.paging_first', tableWrapper).attr('disabled', true);
$('.paging_prev', tableWrapper).attr('disabled', true);
} else {
$('.paging_first', tableWrapper).removeAttr('disabled');
$('.paging_prev', tableWrapper).removeAttr('disabled');
}
if (oSettings._iTotalPages === 0 || oSettings._iCurrentPage === oSettings._iTotalPages) {
$('.paging_next', tableWrapper).attr('disabled', true);
$('.paging_last', tableWrapper).attr('disabled', true);
} else {
$('.paging_next', tableWrapper).removeAttr('disabled');
$('.paging_last', tableWrapper).removeAttr('disabled');
}
var i, oNumber, oNumbers = $('.paging_num', tableWrapper);
// Erase
oNumbers.html('');
for (i = oSettings._iFirstPage; i <= oSettings._iLastPage; i++) {
oNumber = $('<a class="btn btn-small">' + oSettings.fnFormatNumber(i) + '</a>');
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,
"bInfo": true,
"iDisplayLength": 5,
'iShowPages': 5,
"sAjaxSource": "[% helper.ajax_uri %]",
[% IF helper.column_sort -%]
"aaSorting": [

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

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

Write Preview
Loading…
Cancel
Save