Implement feature

README.md

@@ -104,6 +104,7 @@ See [this working demo](https://wikiti-random-stuff.gitlab.io/jquery-paginate/ex
 | `navigationWrapper` | `null` | A **jquery object** to append the navigation bar to it. This can be used to put your navigation bar on a sticky footer, for example. If `null`, then it will be added after the table. |
 | `navigationClass` | `'page-navigation'` | A **css class name** applied to the navigation menu bar. Can contain multiple classes names, separated with spaces. |
 | `pageToText` | `function(i) { return (i + 1).toString(); }` | A javascript function to transform the current page index (*0...N-1*) to a string, shown in the navigation menu. |
+| `paginatePages` | `false` | A numeric flag to enable pagination for nav buttons. For example, if you have 15 buttons, and you only want to show 5, use `paginatePages: 5` |
 For example, a working example with all options:

example.html

@@ -39,7 +39,7 @@
 <script>
   // Add some examples to the page
-  for(var i = 0; i < 40; ++i)
+  for(var i = 0; i < 150; ++i)
     $('#myTable > tbody').append('<tr><td>' + i + '</td><td>' + i.toString(16) + '</td></tr>');
   // Paginate it
@@ -47,7 +47,8 @@
     limit: 10,
     onSelect: function(obj, page) {
       console.log('Page ' + page + ' selected!' );
-    }
+    },
+    paginatePages: 5
   });
 </script>

jquery-paginate.js

@@ -29,11 +29,13 @@
         this._appendNavigation();
         this._addNavigationCallbacks();
       },
+
       _createNavigationWrapper: function() {
         this.nav = $('<div>', {
           class: this.options.navigationClass
         });
       },
+
       _createNavigationButtons: function() {
         // Add 'first' button
         if(this.options.first) {
@@ -72,15 +74,30 @@
           });
         }
       },
+
+      _hideNumericNavigationButtons: function() {
+        this.nav.find('a[data-page]').hide();
+      },
+
+      _showCurrentNumericNavigationButtons: function() {
+        this._hideNumericNavigationButtons();
+
+        var buttons = this.nav.find('a[data-page]');
+        var current_group = this.options.paginatePages * Math.floor(this._currentPage() / this.options.paginatePages);
+        buttons.slice(current_group, current_group + this.options.paginatePages).show();
+      },
+
       _createNavigationButton: function(text, options) {
         this.nav.append($('<a>', $.extend(options, { href: '#', text: text })));
       },
+
       _appendNavigation: function() {
         // Add the content to the navigation block
         if(this.options.navigationWrapper) this.options.navigationWrapper.append(this.nav);
         // Add it after the table
         else this.obj.after(this.nav);
       },
+
       _addNavigationCallbacks: function() {
         var paginator = this;
@@ -97,7 +114,15 @@
           }
           // 'Previous' or 'Next' button
           else if ($(this).data('previous') !== undefined || $(this).data('next') !== undefined) {
-            var page = paginator._currentPage() + direction;
+            var page;
+            if(paginator.options.paginatePages) {
+              page = paginator._currentPage() + direction * paginator.options.paginatePages;
+              page = paginator.options.paginatePages * Math.floor(page / paginator.options.paginatePages);
+            }
+            else {
+              page = paginator._currentPage() + direction;
+            }
+
             if(page >= 0 && page <= paginator._totalPages() - 1) {
               paginator._setPage(page);
             }
@@ -123,18 +148,24 @@
         // Set the current button as active
         this.nav.find('a').removeAttr('data-selected').siblings('a[data-page=' + index + ']')
                 .attr('data-selected', true);
+
+        // Paginate pages, if present
+        if(this.options.paginatePages) this._showCurrentNumericNavigationButtons();
       },
       _currentPage: function() {
         return this.nav.find('a[data-selected=true]').data('page');
       },
+
       _totalRows: function() {
         // Count the total rows of the selector
         return this._rows().length;
       },
+
       _rows: function() {
         return this.obj.find(this.options.childrenSelector);
       },
+
       _totalPages: function() {
         return Math.floor(this._totalRows() / this.options.limit);
       }
@@ -170,7 +201,9 @@
     childrenSelector: 'tbody > tr',
     navigationWrapper: null,
     navigationClass: 'page-navigation',
-    pageToText: function(i) { return (i + 1).toString(); }
+    pageToText: function(i) { return (i + 1).toString(); },
+
+    paginatePages: false
   }
 }(jQuery));

jquery-paginate.min.js

-!function(t){"use strict"
-var i=function(){return{obj:null,options:null,nav:null,build:function(t,i){return this.obj=t,this.options=i,this._createNavigation(),this._setPage(),this.options.onCreate&&this.options.onCreate(t),this.obj},_createNavigation:function(){this._createNavigationWrapper(),this._createNavigationButtons(),this._appendNavigation(),this._addNavigationCallbacks()},_createNavigationWrapper:function(){this.nav=t("<div>",{"class":this.options.navigationClass})},_createNavigationButtons:function(){this.options.first&&this._createNavigationButton(this.options.firstText,{"data-first":!0}),this.options.previous&&this._createNavigationButton(this.options.previousText,{"data-direction":-1,"data-previous":!0})
-for(var t=0;t<this._totalPages();++t)this._createNavigationButton(this.options.pageToText(t),{"data-page":t})
-this.options.next&&this._createNavigationButton(this.options.nextText,{"data-direction":1,"data-next":!0}),this.options.last&&this._createNavigationButton(this.options.lastText,{"data-last":!0})},_createNavigationButton:function(i,a){this.nav.append(t("<a>",t.extend(a,{href:"#",text:i})))},_appendNavigation:function(){this.options.navigationWrapper?this.options.navigationWrapper.append(this.nav):this.obj.after(this.nav)},_addNavigationCallbacks:function(){var i=this
-i.nav.find("a").click(function(a){var n=1*t(this).data("direction")
-if(void 0!==t(this).data("first"))i._setPage(0)
-else if(void 0!==t(this).data("page"))i._setPage(1*t(this).data("page"))
-else if(void 0!==t(this).data("previous")||void 0!==t(this).data("next")){var e=i._currentPage()+n
-e>=0&&e<=i._totalPages()-1&&i._setPage(e)}else void 0!==t(this).data("last")&&i._setPage(i._totalPages()-1)
-return i.options.onSelect&&i.options.onSelect(i.obj,i._currentPage()),a.preventDefault(),!1})},_setPage:function(t){t||(t=this.options.initialPage),this._rows().hide().slice(t*this.options.limit,(t+1)*this.options.limit).show(),this.nav.find("a").removeAttr("data-selected").siblings("a[data-page="+t+"]").attr("data-selected",!0)},_currentPage:function(){return this.nav.find("a[data-selected=true]").data("page")},_totalRows:function(){return this._rows().length},_rows:function(){return this.obj.find(this.options.childrenSelector)},_totalPages:function(){return Math.floor(this._totalRows()/this.options.limit)}}}
-t.fn.paginate=function(a){switch(a){default:return i().build(this,t.extend({},t.fn.paginate.defaults,a))}},t.fn.paginate.defaults={limit:20,initialPage:0,previous:!0,previousText:"<",next:!0,nextText:">",first:!0,firstText:"<<",last:!0,lastText:">>",optional:!0,onCreate:null,onSelect:null,childrenSelector:"tbody > tr",navigationWrapper:null,navigationClass:"page-navigation",pageToText:function(t){return(t+1).toString()}}}(jQuery)
+(function($){"use strict";var Paginator=function(){return{obj:null,options:null,nav:null,build:function(obj,opts){this.obj=obj;this.options=opts;if(!this.options.optional||this._totalRows()>this.options.limit){this._createNavigation();this._setPage()}if(this.options.onCreate)this.options.onCreate(obj);return this.obj},_createNavigation:function(){this._createNavigationWrapper();this._createNavigationButtons();this._appendNavigation();this._addNavigationCallbacks()},_createNavigationWrapper:function(){this.nav=$("<div>",{class:this.options.navigationClass})},_createNavigationButtons:function(){if(this.options.first){this._createNavigationButton(this.options.firstText,{"data-first":true})}if(this.options.previous){this._createNavigationButton(this.options.previousText,{"data-direction":-1,"data-previous":true})}for(var i=0;i<this._totalPages();++i){this._createNavigationButton(this.options.pageToText(i),{"data-page":i})}if(this.options.next){this._createNavigationButton(this.options.nextText,{"data-direction":1,"data-next":true})}if(this.options.last){this._createNavigationButton(this.options.lastText,{"data-last":true})}},_hideNumericNavigationButtons:function(){this.nav.find("a[data-page]").hide()},_showCurrentNumericNavigationButtons:function(){this._hideNumericNavigationButtons();var buttons=this.nav.find("a[data-page]");var current_group=this.options.paginatePages*Math.floor(this._currentPage()/this.options.paginatePages);buttons.slice(current_group,current_group+this.options.paginatePages).show()},_createNavigationButton:function(text,options){this.nav.append($("<a>",$.extend(options,{href:"#",text:text})))},_appendNavigation:function(){if(this.options.navigationWrapper)this.options.navigationWrapper.append(this.nav);else this.obj.after(this.nav)},_addNavigationCallbacks:function(){var paginator=this;paginator.nav.find("a").click(function(e){var direction=$(this).data("direction")*1;if($(this).data("first")!==undefined){paginator._setPage(0)}else if($(this).data("page")!==undefined){paginator._setPage($(this).data("page")*1)}else if($(this).data("previous")!==undefined||$(this).data("next")!==undefined){var page;if(paginator.options.paginatePages){page=paginator._currentPage()+direction*paginator.options.paginatePages;page=paginator.options.paginatePages*Math.floor(page/paginator.options.paginatePages)}else{page=paginator._currentPage()+direction}if(page>=0&&page<=paginator._totalPages()-1){paginator._setPage(page)}}else if($(this).data("last")!==undefined){paginator._setPage(paginator._totalPages()-1)}if(paginator.options.onSelect)paginator.options.onSelect(paginator.obj,paginator._currentPage());e.preventDefault();return false})},_setPage:function(index){if(!index)index=this.options.initialPage;this._rows().hide().slice(index*this.options.limit,(index+1)*this.options.limit).show();this.nav.find("a").removeAttr("data-selected").siblings("a[data-page="+index+"]").attr("data-selected",true);if(this.options.paginatePages)this._showCurrentNumericNavigationButtons()},_currentPage:function(){return this.nav.find("a[data-selected=true]").data("page")},_totalRows:function(){return this._rows().length},_rows:function(){return this.obj.find(this.options.childrenSelector)},_totalPages:function(){return Math.floor(this._totalRows()/this.options.limit)}}};$.fn.paginate=function(options){switch(options){default:return Paginator().build(this,$.extend({},$.fn.paginate.defaults,options))}};$.fn.paginate.defaults={limit:20,initialPage:0,previous:true,previousText:"<",next:true,nextText:">",first:true,firstText:"<<",last:true,lastText:">>",optional:true,onCreate:null,onSelect:null,childrenSelector:"tbody > tr",navigationWrapper:null,navigationClass:"page-navigation",pageToText:function(i){return(i+1).toString()},paginatePages:false}})(jQuery);