Browse Source

Added paginationLoadMore table option

zhixin 1 year ago
parent
commit
7276c914d2
3 changed files with 38 additions and 3 deletions
  1. 17 0
      site/docs/api/table-options.md
  2. 20 3
      src/bootstrap-table.js
  3. 1 0
      src/constants/index.js

+ 17 - 0
site/docs/api/table-options.md

@@ -966,6 +966,23 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
 
 - **Example:** [Pagination H Align](https://examples.bootstrap-table.com/#options/pagination-h-align.html)
 
+## paginationLoadMore
+
+- **Attribute:** `data-pagination-load-more`
+
+- **Type:** `Boolean`
+
+- **Detail:**
+
+  Set `true` to enable loading more data through pagination. It is only used in the client-side pagination. In general, to implement the "load more" functionality, it is often necessary to combine it with a `responseHandler` to process the returned data.
+
+  It is primarily used in scenarios where the total number of pages is unknown. In such cases, it is not possible to display the exact total count or calculate the total number of pages. Instead, a display format such as "100+" can be utilized to indicate the presence of additional items beyond the displayed count. As the user navigates to the last page, more data is loaded, along with an update to the pagination information. This process continues until all data loading is complete.
+
+- **Default:** `false`
+
+- **Example:** [Pagination Load More](https://examples.bootstrap-table.com/#options/pagination-load-more.html)
+
+
 ## paginationLoop
 
 - **Attribute:** `data-pagination-loop`

+ 20 - 3
src/bootstrap-table.js

@@ -1236,9 +1236,13 @@ class BootstrapTable {
     }
 
     if (this.paginationParts.includes('pageInfo') || this.paginationParts.includes('pageInfoShort')) {
+      const totalRows = this.options.totalRows +
+        (this.options.sidePagination === 'client' &&
+        this.options.paginationLoadMore &&
+        !this._paginationLoaded ? ' +' : '')
       const paginationInfo = this.paginationParts.includes('pageInfoShort') ?
-        opts.formatDetailPagination(opts.totalRows) :
-        opts.formatShowingRows(this.pageFrom, this.pageTo, opts.totalRows, opts.totalNotFiltered)
+        opts.formatDetailPagination(totalRows) :
+        opts.formatShowingRows(this.pageFrom, this.pageTo, totalRows, opts.totalNotFiltered)
 
       html.push(`<span class="pagination-info">
       ${paginationInfo}
@@ -1428,7 +1432,13 @@ class BootstrapTable {
 
     this.trigger('page-change', this.options.pageNumber, this.options.pageSize)
 
-    if (this.options.sidePagination === 'server') {
+    if (
+      this.options.sidePagination === 'server' ||
+      this.options.sidePagination === 'client' &&
+      this.options.paginationLoadMore &&
+      !this._paginationLoaded &&
+      this.options.pageNumber === this.totalPages
+    ) {
       this.initServer()
     } else {
       this.initBody()
@@ -2047,6 +2057,13 @@ class BootstrapTable {
         const res = Utils.calculateObjectValue(this.options,
           this.options.responseHandler, [_res, jqXHR], _res)
 
+        if (
+          this.options.sidePagination === 'client' &&
+          this.options.paginationLoadMore
+        ) {
+          this._paginationLoaded = this.data.length === res.length
+        }
+
         this.load(res)
         this.trigger('load-success', res, jqXHR && jqXHR.status, jqXHR)
         if (!silent) {

+ 1 - 0
src/constants/index.js

@@ -178,6 +178,7 @@ const DEFAULTS = {
   paginationSuccessivelySize: 5, // 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
+  paginationLoadMore: false,
   search: false,
   searchable: false,
   searchHighlight: false,