Implement better pagination for datatables.

The previous implementation seems to got lost somewhere.

share/static/css/main.css

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

share/static/js/libs/datatables-bootstrap-paging.js

@@ -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.oPagination.bootstrap = {
-$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
+    'oDefaults': {
-{
+        'iShowPages': 5
-	return {
+    },
-		"iStart":         oSettings._iDisplayStart,
+    'fnClickHandler': function(e) {
-		"iEnd":           oSettings.fnDisplayEnd(),
+        var fnCallbackDraw = e.data.fnCallbackDraw,
-		"iLength":        oSettings._iDisplayLength,
+            oSettings = e.data.oSettings,
-		"iTotal":         oSettings.fnRecordsTotal(),
+            sPage = e.data.sPage;
-		"iFilteredTotal": oSettings.fnRecordsDisplay(),
-		"iPage":          Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
-		"iTotalPages":    Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
-	};
-}
  
-/* 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;
-			var fnClickHandler = function ( e ) {
-				e.preventDefault();
-				if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
-					fnDraw( oSettings );
         }
-			};
  
-			$(nPaging).addClass('pagination').append(
+        oSettings.oApi._fnPageChange(oSettings, sPage);
-				'<ul class="pull-right">'+
+        fnCallbackDraw(oSettings);
-					'<li class="prev disabled"><a href="#">&larr;</a></li>'+
+ 
-					'<li class="next disabled"><a href="#">&rarr;</a></li>'+
+        return true;
-				'</ul>'
-			);
-			var els = $('a', nPaging);
-			$(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
-			$(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler );
     },
+    // fnInit is called once for each instance of pager
+    'fnInit': function(oSettings, nPager, fnCallbackDraw) {
+        var oClasses = oSettings.oClasses,
+            oLang = oSettings.oLanguage.oPaginate,
+            that = this;
  
-		"fnUpdate": function ( oSettings, fnDraw ) {
+        var iShowPages = oSettings.oInit.iShowPages || this.oDefaults.iShowPages,
-			var iListLength = 5;
+            iShowPagesHalf = Math.floor(iShowPages / 2);
-			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) {
+        $.extend(oSettings, {
-				iStart = 1;
+            _iShowPages: iShowPages,
-				iEnd = oPaging.iTotalPages;
+            _iShowPagesHalf: iShowPagesHalf,
-			}
+        });
-			else if ( oPaging.iPage <= iHalf ) {
+ 
-				iStart = 1;
+        var oFirst = $('<a class="btn btn-small paging_first">&lArr;</a>'),
-				iEnd = iListLength;
+            oPrevious = $('<a class="btn btn-small paging_prev">&larr;</a>'),
-			} else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {
+            oNumbers = $('<span class="paging_num"></span>'),
-				iStart = oPaging.iTotalPages - iListLength + 1;
+            oNext = $('<a class="btn btn-small paging_next">&rarr;</a>'),
-				iEnd = oPaging.iTotalPages;
+            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 {
-				iStart = oPaging.iPage - iHalf + 1;
+            $('.paging_first', tableWrapper).removeAttr('disabled');
-				iEnd = iStart + iListLength - 1;
+            $('.paging_prev', tableWrapper).removeAttr('disabled');
         }
  
-			for ( i=0, iLen=an.length ; i<iLen ; i++ ) {
+        if (oSettings._iTotalPages === 0 || oSettings._iCurrentPage === oSettings._iTotalPages) {
-				// Remove the middle elements
+            $('.paging_next', tableWrapper).attr('disabled', true);
-				$('li:gt(0)', an[i]).filter(':not(:last)').remove();
+            $('.paging_last', tableWrapper).attr('disabled', true);
-
+        } else {
-				// Add the new list items and their event handlers
+            $('.paging_next', tableWrapper).removeAttr('disabled');
-				for ( j=iStart ; j<=iEnd ; j++ ) {
+            $('.paging_last', tableWrapper).removeAttr('disabled');
-					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
+        var i, oNumber, oNumbers = $('.paging_num', tableWrapper);
-				if ( oPaging.iPage === 0 ) {
+ 
-					$('li:first', an[i]).addClass('disabled');
+        // 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 {
-					$('li:first', an[i]).removeClass('disabled');
+                oNumber.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': i - 1 }, that.fnClickHandler);
             }
  
-				if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
+            // Draw
-					$('li:last', an[i]).addClass('disabled');
+            oNumbers.append(oNumber);
-				} else {
-					$('li:last', an[i]).removeClass('disabled');
         }
+ 
+        // 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
         });
+    }
+};

share/templates/helpers/datatables.tt

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

share/templates/helpers/datatables_field.tt

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