feat(js): Improve pagination options

docs/_i18n/en/documentation/table-options.md

@@ -531,6 +531,27 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
     <td>Indicate the icon or text to be shown in the pagination detail, the next button.</td>
   </tr>
   <tr>
+      <td>paginationSuccessivelySize</td>
+      <td>data-pagination-successively-size</td>
+      <td>Number</td>
+      <td>3</td>
+      <td>Maximum successively number of pages in a row.</td>
+  </tr>
+  <tr>
+      <td>paginationPagesBySide</td>
+      <td>data-pagination-pages-by-side</td>
+      <td>Number</td>
+      <td>1</td>
+      <td>Number of pages on each side (right, left) of the current page.</td>
+  </tr>
+   <tr>
+      <td>paginationUseIntermediate</td>
+      <td>data-pagination-use-intermediate</td>
+      <td>Boolean</td>
+      <td>false</td>
+      <td>Calculate and show intermediate pages for quick access</td>
+  </tr>
+  <tr>
     <td>clickToSelect</td>
     <td>data-click-to-select</td>
     <td>Boolean</td>

docs/_i18n/es/documentation/table-options.md

@@ -449,6 +449,27 @@ Las opciones de la tabla están definidas en `jQuery.fn.bootstrapTable.defaults`
     <td>'&gt;'</td>
     <td>Indica el icono o el texto a mostrar en la paginación, el botón next del detalle de la paginación.</td>
   </tr>
+    <tr>
+      <td>paginationSuccessivelySize</td>
+      <td>data-pagination-successively-size</td>
+      <td>Number</td>
+      <td>3</td>
+      <td>Número máximo sucesivo de páginas en una fila.</td>
+  </tr>
+  <tr>
+      <td>paginationPagesBySide</td>
+      <td>data-pagination-pages-by-side</td>
+      <td>Number</td>
+      <td>1</td>
+      <td>Número de páginas en cada lado (derecha, izquierda) de la página actual.</td>
+  </tr>
+   <tr>
+      <td>paginationUseIntermediate</td>
+      <td>data-pagination-use-intermediate</td>
+      <td>Boolean</td>
+      <td>false</td>
+      <td>Calcula y muestra páginas intermedias para un acceso rápido.</td>
+  </tr>
   <tr>
     <td>clickToSelect</td>
     <td>data-click-to-select</td>

docs/_i18n/zh-cn/documentation/table-options.md

@@ -476,6 +476,27 @@
     <td>'&gt;'</td>
     <td>指定分页条中下一页按钮的图标或文字。</td>
   </tr>
+    <tr>
+      <td>paginationSuccessivelySize</td>
+      <td>data-pagination-successively-size</td>
+      <td>Number</td>
+      <td>3</td>
+      <td>Maximum successively number of pages in a row.</td>
+  </tr>
+  <tr>
+      <td>paginationPagesBySide</td>
+      <td>data-pagination-pages-by-side</td>
+      <td>Number</td>
+      <td>1</td>
+      <td>Number of pages on each side (right, left) of the current page.</td>
+  </tr>
+   <tr>
+      <td>paginationUseIntermediate</td>
+      <td>data-pagination-use-intermediate</td>
+      <td>Boolean</td>
+      <td>false</td>
+      <td>Calculate and show intermediate pages for quick access</td>
+  </tr>
   <tr>
     <td>clickToSelect</td>
     <td>data-click-to-select</td>

src/bootstrap-table.css

@@ -157,6 +157,18 @@
     line-height: 1.428571429;
 }
 
+.fixed-table-pagination ul.pagination li.page-intermediate a {
+    color:#c8c8c8;
+}
+
+.fixed-table-pagination ul.pagination li.page-intermediate a:before {
+    content: '\2B05';
+}
+
+.fixed-table-pagination ul.pagination li.page-intermediate a:after {
+    content: '\27A1';
+}
+
 .fixed-table-pagination .pagination-info {
     line-height: 34px;
     margin-right: 5px;

src/bootstrap-table.js

@@ -307,6 +307,9 @@
     paginationDetailHAlign: 'left', // right, left
     paginationPreText: '‹',
     paginationNextText: '›',
+    paginationSuccessivelySize: 3, // Maximum successively number of pages in a row
+    paginationPagesBySide: 1, // Number of pages on each side (right, left) of the current page.
+    paginationUseIntermediate: false, // Calculate intermediate pages for quick access
     search: false,
     searchOnEnterKey: false,
     strictSearch: false,
@@ -1440,83 +1443,96 @@
           Utils.sprintf('<li class="page-item page-pre"><a class="page-link" href="#">%s</a></li>',
             this.options.paginationPreText))
 
-        if (this.totalPages < 5) {
+        if (this.totalPages < this.options.paginationSuccessivelySize) {
           from = 1
           to = this.totalPages
         } else {
-          from = this.options.pageNumber - 2
-          to = from + 4
-          if (from < 1) {
-            from = 1
-            to = 5
-          }
-          if (to > this.totalPages) {
-            to = this.totalPages
-            from = to - 4
-          }
+          from = this.options.pageNumber - this.options.paginationPagesBySide
+          to = from + (this.options.paginationPagesBySide * 2)
         }
 
-        if (this.totalPages >= 6) {
-          if (this.options.pageNumber >= 3) {
-            html.push(
-              Utils.sprintf('<li class="page-item page-first%s">',
-                this.options.pageNumber === 1 ? ' active' : ''),
-              '<a class="page-link" href="#">', 1, '</a>',
-              '</li>')
+        if (this.options.pageNumber < (this.options.paginationSuccessivelySize - 2)) {
+          to = this.options.paginationSuccessivelySize
+        }
 
-            from++
-          }
+        if (to > this.totalPages) {
+          to = this.totalPages
+        }
 
-          if (this.options.pageNumber >= 4) {
-            if (this.options.pageNumber === 4 || this.totalPages === 6 || this.totalPages === 7) {
-              from--
-            } else {
-              html.push('<li class="page-item page-first-separator disabled">',
-                '<a class="page-link" href="#">...</a>',
-                '</li>')
-            }
+        if (this.options.paginationSuccessivelySize > this.totalPages - from) {
+          from = from - (this.options.paginationSuccessivelySize - (this.totalPages - from)) + 1
+        }
 
-            to--
-          }
+        if (from < 1) {
+          from = 1
         }
 
-        if (this.totalPages >= 7) {
-          if (this.options.pageNumber >= (this.totalPages - 2)) {
-            from--
-          }
+        if (to > this.totalPages) {
+          to = this.totalPages
         }
 
-        if (this.totalPages === 6) {
-          if (this.options.pageNumber >= (this.totalPages - 2)) {
-            to++
+        if (from > 1) {
+          var max = this.options.paginationPagesBySide
+          if (max >= from) max = from - 1
+          for (i = 1; i <= max; i++) {
+            html.push('<li data-page-number="' + i + '" class="page-number' + (i === this.options.pageNumber ? ' active' : '') + '">',
+              '<a href="javascript:void(0)">', i, '</a>',
+              '</li>')
           }
-        } else if (this.totalPages >= 7) {
-          if (this.totalPages === 7 || this.options.pageNumber >= (this.totalPages - 3)) {
-            to++
+          if ((from - 1) === max + 1) {
+            i = from - 1
+            html.push('<li data-page-number="' + i + '" class="page-number' + (i === this.options.pageNumber ? ' active' : '') + '">',
+              '<a href="javascript:void(0)">', i, '</a>',
+              '</li>')
+          } else {
+            if ((from - 1) > max) {
+              if (((from - 10) > 5) && (this.options.paginationUseIntermediate)) {
+                i = Math.round(((from - 3) / 2) + 3)
+                html.push('<li data-page-number="' + i + '" class="page-intermediate page-number' + (i === this.options.pageNumber ? ' active' : '') + '">',
+                  '<a href="javascript:void(0)">', i, '</a>',
+                  '</li>')
+              } else {
+                html.push('<li class="page-first-separator disabled">',
+                  '<a href="javascript:void(0)">&#8230;</a>',
+                  '</li>')
+              }
+            }
           }
         }
 
         for (i = from; i <= to; i++) {
-          html.push(Utils.sprintf('<li class="page-item%s">',
-            i === this.options.pageNumber ? ' active' : ''),
-          '<a class="page-link" href="#">', i, '</a>',
-          '</li>')
+          html.push('<li data-page-number="' + i + '" class="page-number' + (i === this.options.pageNumber ? ' active' : '') + '">',
+            '<a href="javascript:void(0)">', i, '</a>',
+            '</li>')
         }
 
-        if (this.totalPages >= 8) {
-          if (this.options.pageNumber <= (this.totalPages - 4)) {
-            html.push('<li class="page-item page-last-separator disabled">',
-              '<a class="page-link" href="#">...</a>',
+        if (this.totalPages > to) {
+          var min = this.totalPages - (this.options.paginationPagesBySide - 1)
+          if (to >= min) min = to + 1
+          if ((to + 1) === min - 1) {
+            i = to + 1
+            html.push('<li data-page-number="' + i + '" class="page-number' + (i === this.options.pageNumber ? ' active' : '') + '">',
+              '<a href="javascript:void(0)">', i, '</a>',
               '</li>')
+          } else {
+            if (min > (to + 1)) {
+              if (((this.totalPages - to) > 10) && (this.options.paginationUseIntermediate)) {
+                i = Math.round(((this.totalPages - 3 - to) / 2) + to)
+                html.push('<li data-page-number="' + i + '" class="page-intermediate page-number' + (i === this.options.pageNumber ? ' active' : '') + '">',
+                  '<a href="javascript:void(0)">', i, '</a>',
+                  '</li>')
+              } else {
+                html.push('<li class="page-first-separator disabled">',
+                  '<a href="javascript:void(0)">&#8230;</a>',
+                  '</li>')
+              }
+            }
           }
-        }
 
-        if (this.totalPages >= 6) {
-          if (this.options.pageNumber <= (this.totalPages - 3)) {
-            html.push(Utils.sprintf('<li class="page-item page-last%s">',
-              this.totalPages === this.options.pageNumber ? ' active' : ''),
-            '<a class="page-link" href="#">', this.totalPages, '</a>',
-            '</li>')
+          for (i = min; i <= this.totalPages; i++) {
+            html.push('<li data-page-number="' + i + '" class="page-number' + (i === this.options.pageNumber ? ' active' : '') + '">',
+              '<a href="javascript:void(0)">', i, '</a>',
+              '</li>')
           }
         }
 
@@ -1532,7 +1548,7 @@
         $pageList = this.$pagination.find('.page-list a')
         $pre = this.$pagination.find('.page-pre')
         $next = this.$pagination.find('.page-next')
-        $number = this.$pagination.find('.page-item').not('.page-next, .page-pre')
+        $number = this.$pagination.find('.page-number, .page-item').not('.page-next, .page-pre')
 
         if (this.options.smartDisplay) {
           if (this.totalPages <= 1) {

src/extensions/cookie/bootstrap-table-cookie.js

@@ -283,32 +283,37 @@
     }
 
     onSort () {
-      super.onSort()
+      const event = arguments[0]
+      super.onSort(event)
       UtilsCookie.setCookie(this, UtilsCookie.cookieIds.sortOrder, this.options.sortOrder)
       UtilsCookie.setCookie(this, UtilsCookie.cookieIds.sortName, this.options.sortName)
     }
 
     onPageNumber () {
-      super.onPageNumber()
+      const event = arguments[0]
+      super.onPageNumber(event)
       UtilsCookie.setCookie(this, UtilsCookie.cookieIds.pageNumber, this.options.pageNumber)
       return false
     }
 
     onPageListChange () {
-      super.onPageListChange()
+      const event = arguments[0]
+      super.onPageListChange(event)
       UtilsCookie.setCookie(this, UtilsCookie.cookieIds.pageList, this.options.pageSize)
       UtilsCookie.setCookie(this, UtilsCookie.cookieIds.pageNumber, this.options.pageNumber)
       return false
     }
 
     onPagePre () {
-      super.onPagePre()
+      const event = arguments[0]
+      super.onPagePre(event)
       UtilsCookie.setCookie(this, UtilsCookie.cookieIds.pageNumber, this.options.pageNumber)
       return false
     }
 
     onPageNext () {
-      super.onPageNext()
+      const event = arguments[0]
+      super.onPageNext(event)
       UtilsCookie.setCookie(this, UtilsCookie.cookieIds.pageNumber, this.options.pageNumber)
       return false
     }