Browse Source

removed the option "onlyInfoPagination" and added the option
paginationParts

Dustin Utecht 5 years ago
parent
commit
6b1fc2b7fc

+ 18 - 14
site/docs/api/table-options.md

@@ -714,20 +714,6 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
 
 - **Example:** [Multiple Select Row](https://examples.bootstrap-table.com/#options/multiple-select-row.html)
 
-## onlyInfoPagination
-
-- **Attribute:** `data-only-info-pagination`
-
-- **Type:** `Boolean`
-
-- **Detail:**
-
-  Set `true` to show only the quantity of the data that is showing in the table. It needs the pagination table options is set to true.
-
-- **Default:** `false`
-
-- **Example:** [Only Info Pagination](https://examples.bootstrap-table.com/#options/only-info-pagination.html)
-
 ## pageList
 
 - **Attribute:** `data-page-list`
@@ -854,6 +840,24 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
 
 - **Example:** [Pagination Index Number](https://examples.bootstrap-table.com/#options/pagination-index-number.html)
 
+## paginationParts
+
+- **Attribute:** `data-pagination-parts`
+
+- **Type:** `Array`
+
+- **Detail:**
+
+  These options define which parts of the pagination should be visible.
+  * `pageInfo` Shows which dataset will be displayed on the current page (e.g. `Showing 1 to 10 of 54 rows`).
+  * `pageInfoShort` Similar to `pageInfo`, but it only displays how much rows the table has (e.g. `Showing 54 rows`).
+  * `pageSize` Shows the dropdown which defines how many rows should be displayed on the page.
+  * `pageList` Shows the main part of the pagination (The list of the pages).
+
+- **Default:** `['pageInfo', 'pageSize', 'pageList']`
+
+- **Example:** [Pagination Parts](https://examples.bootstrap-table.com/#options/pagination-parts.html)
+
 ## paginationPreText
 
 - **Attribute:** `data-pagination-pre-text`

+ 18 - 6
src/bootstrap-table.js

@@ -976,6 +976,11 @@ class BootstrapTable {
       return value
     })
 
+    this.paginationParts = opts.paginationParts
+    if (typeof this.paginationParts === 'string') {
+      this.paginationParts = this.paginationParts.replace(/\[|\]| |'/g, '').split(',')
+    }
+
     if (opts.sidePagination !== 'server') {
       opts.totalRows = data.length
     }
@@ -1009,16 +1014,18 @@ class BootstrapTable {
       this.options.totalNotFiltered = undefined
     }
 
-    const paginationInfo = opts.onlyInfoPagination ?
-      opts.formatDetailPagination(opts.totalRows) :
-      opts.formatShowingRows(this.pageFrom, this.pageTo, opts.totalRows, opts.totalNotFiltered)
+    if (this.paginationParts.includes('pageInfo') || this.paginationParts.includes('pageInfoShort') || this.paginationParts.includes('pageSize')) {
+      html.push(`<div class="${this.constants.classes.pull}-${opts.paginationDetailHAlign} pagination-detail">`)
+    }
 
-    html.push(`<div class="${this.constants.classes.pull}-${opts.paginationDetailHAlign} pagination-detail">
-      <span class="pagination-info">
+    if (this.paginationParts.includes('pageInfo') || this.paginationParts.includes('pageInfoShort')) {
+      const paginationInfo = this.paginationParts.includes('pageInfoShort') ? opts.formatDetailPagination(opts.totalRows) : opts.formatShowingRows(this.pageFrom, this.pageTo, opts.totalRows, opts.totalNotFiltered)
+      html.push(`<span class="pagination-info">
       ${paginationInfo}
       </span>`)
+    }
 
-    if (!opts.onlyInfoPagination) {
+    if (this.paginationParts.includes('pageSize')) {
       html.push('<span class="page-list">')
 
       const pageNumber = [
@@ -1045,8 +1052,13 @@ class BootstrapTable {
       pageNumber.push(`${this.constants.html.pageDropdown[1]}</span>`)
 
       html.push(opts.formatRecordsPerPage(pageNumber.join('')))
+    }
+
+    if (this.paginationParts.includes('pageInfo') || this.paginationParts.includes('pageInfoShort') || this.paginationParts.includes('pageSize')) {
       html.push('</span></div>')
+    }
 
+    if (this.paginationParts.includes('pageList')) {
       html.push(`<div class="${this.constants.classes.pull}-${opts.paginationHAlign} pagination">`,
         Utils.sprintf(this.constants.html.pagination[0], Utils.sprintf(' pagination-%s', opts.iconSize)),
         Utils.sprintf(this.constants.html.paginationItem, ' page-pre', opts.formatSRPaginationPreText(), opts.paginationPreText))

+ 1 - 1
src/constants/index.js

@@ -156,7 +156,7 @@ const DEFAULTS = {
   totalNotFilteredField: 'totalNotFiltered',
   dataField: 'rows',
   pagination: false,
-  onlyInfoPagination: false,
+  paginationParts: ['pageInfo', 'pageSize', 'pageList'],
   showExtendedPagination: false,
   paginationLoop: true,
   sidePagination: 'client', // client or server

+ 2 - 1
src/themes/bulma/bootstrap-table-bulma.js

@@ -52,7 +52,8 @@ $.BootstrapTable = class extends $.BootstrapTable {
 
   initPagination () {
     super.initPagination()
-    if (this.options.pagination && !this.options.onlyInfoPagination) {
+
+    if (this.options.pagination && this.paginationParts.includes('pageSize')) {
       this._initDropdown()
     }
   }

+ 1 - 1
src/themes/foundation/bootstrap-table-foundation.js

@@ -57,7 +57,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
   initPagination () {
     super.initPagination()
 
-    if (this.options.pagination && !this.options.onlyInfoPagination) {
+    if (this.options.pagination && this.paginationParts.includes('pageSize')) {
       const $el = this.$pagination.find('.dropdown-toggle')
       $el.attr('data-toggle', $el.next().attr('id'))
 

+ 1 - 1
src/themes/materialize/bootstrap-table-materialize.js

@@ -71,7 +71,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
   initPagination () {
     super.initPagination()
 
-    if (this.options.pagination && !this.options.onlyInfoPagination) {
+    if (this.options.pagination && this.paginationParts.includes('pageSize')) {
       this.$pagination.find('.dropdown-toggle')
         .attr('data-target', this.$pagination.find('.dropdown-content').attr('id'))
         .dropdown()

+ 1 - 1
src/themes/semantic/bootstrap-table-semantic.js

@@ -43,7 +43,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
 
   initPagination () {
     super.initPagination()
-    if (this.options.pagination && !this.options.onlyInfoPagination) {
+    if (this.options.pagination && this.paginationParts.includes('pageSize')) {
       this.$pagination.find('.dropdown').dropdown()
     }
   }