Browse Source

Add a toggle pagination toolbar button

Vincent Renaudineau 11 years ago
parent
commit
03b1944508
1 changed files with 33 additions and 0 deletions
  1. 33 0
      src/bootstrap-table.js

+ 33 - 0
src/bootstrap-table.js

@@ -150,6 +150,7 @@
         selectItemName: 'btSelectItem',
         showHeader: true,
         showColumns: false,
+        showPaginationSwitch: false,
         showRefresh: false,
         showToggle: false,
         smartDisplay: true,
@@ -167,6 +168,8 @@
         searchTimeOut: 500,
         iconsPrefix: 'glyphicon', // glyphicon of fa (font awesome)
         icons: {
+            paginationSwitchDown: 'glyphicon-collapse-down',
+            paginationSwitchUp: 'glyphicon-collapse-up',
             refresh: 'glyphicon-refresh icon-refresh',
             toggle: 'glyphicon-list-alt icon-list-alt',
             columns: 'glyphicon-th icon-th'
@@ -211,6 +214,9 @@
         formatNoMatches: function () {
             return 'No matching records found';
         },
+        formatPaginationSwitch: function () {
+            return 'Hide/Show pagination';
+        },
         formatRefresh: function () {
             return 'Refresh';
         },
@@ -571,6 +577,13 @@
             this.options.icons = calculateObjectValue(null, this.options.icons);
         }
 
+        if (this.options.showPaginationSwitch) {
+            html.push(sprintf('<button class="btn btn-default" type="button" name="paginationSwitch" title="%s">',
+                this.options.formatPaginationSwitch()),
+                sprintf('<i class="%s %s"></i>', this.options.iconsPrefix, this.options.icons.paginationSwitchDown),
+                '</button>');
+        }
+
         if (this.options.showRefresh) {
             html.push(sprintf('<button class="btn btn-default" type="button" name="refresh" title="%s">',
                 this.options.formatRefresh()),
@@ -618,6 +631,11 @@
             this.$toolbar.append(html.join(''));
         }
 
+        if (this.options.showPaginationSwitch) {
+            this.$toolbar.find('button[name="paginationSwitch"]')
+                .off('click').on('click', $.proxy(this.togglePagination, this));
+        }
+
         if (this.options.showRefresh) {
             this.$toolbar.find('button[name="refresh"]')
                 .off('click').on('click', $.proxy(this.refresh, this));
@@ -730,7 +748,10 @@
         this.$pagination = this.$container.find('.fixed-table-pagination');
 
         if (!this.options.pagination) {
+            this.$pagination.hide();
             return;
+        } else {
+          this.$pagination.show();
         }
         var that = this,
             html = [],
@@ -1498,6 +1519,17 @@
         this.$loading.hide();
     };
 
+    BootstrapTable.prototype.togglePagination = function () {
+        this.options.pagination = !this.options.pagination;
+        var button = this.$toolbar.find('button[name="paginationSwitch"] i');
+        if (this.options.pagination) {
+            button.attr("class", this.options.iconsPrefix + " " + this.options.icons.paginationSwitchDown);
+        } else {
+            button.attr("class", this.options.iconsPrefix + " " + this.options.icons.paginationSwitchUp);
+        }
+        this.initServer();
+    };
+
     BootstrapTable.prototype.refresh = function (params) {
         if (params && params.url) {
             this.options.url = params.url;
@@ -1551,6 +1583,7 @@
         'mergeCells',
         'checkAll', 'uncheckAll',
         'check', 'uncheck',
+        'togglePagination',
         'refresh',
         'resetView',
         'destroy',