Update the server side pagination and add examples.

docs/examples.html

@@ -80,7 +80,8 @@
                     <li><a href="#card-view">Card View Table</a></li>
                     <li><a href="#radio-table">Radio Table</a></li>
                     <li><a href="#checkbox-table">Checkbox Table</a></li>
-                    <li><a href="#pagination-table">Pagination Table</a></li>
+                    <li><a href="#client-side-pagination-table">Client Side Pagination Table</a></li>
+                    <li><a href="#server-side-pagination-table">Server Side Pagination Table</a></li>
                     <li><a href="#table-events">Table Events</a></li>
                     <li><a href="#table-methods">Table Methods</a></li>
                     <li><a href="#via-javascript-table">Via JavaScript</a></li>
@@ -358,7 +359,7 @@
 
             <div>
                 <div class="page-header">
-                    <h1 id="pagination-table">Pagination Table</h1>
+                    <h1 id="client-side-pagination-table">Client Side Pagination Table</h1>
                 </div>
                 <div class="form-inline">
                     <label>
@@ -388,6 +389,51 @@
 
             <div>
                 <div class="page-header">
+                    <h1 id="server-side-pagination-table">Server Side Pagination Table</h1>
+                </div>
+                <div class="bs-example">
+                    <table id="table-pagination"
+                           data-toggle="table"
+                           data-url="/examples/bootstrap_table/data"
+                           data-height="400"
+                           data-side-pagination="server"
+                           data-pagination="true"
+                           data-search="true"
+                           data-query-params="queryParams">
+                        <thead>
+                        <tr>
+                            <th data-field="state" data-checkbox="true"></th>
+                            <th data-field="id" data-align="right">Item ID</th>
+                            <th data-field="name" data-align="center">Item Name</th>
+                            <th data-field="price" data-align="">Item Price</th>
+                        </tr>
+                        </thead>
+                    </table>
+                    <script>
+                        // url: /examples/bootstrap_table/data?offset=0&limit=10
+                        function queryParams(pageSize, pageNumber) {
+                            return {
+                                limit: pageSize,
+                                offset: pageSize * (pageNumber - 1)
+                            };
+                        }
+
+                        // url: /examples/bootstrap_table/data?page=1&number=10
+                        /*
+                        function queryParams(pageSize, pageNumber) {
+                            return {
+                                page: pageNumber,
+                                number: pageSize
+                            };
+                        }
+                        */
+                    </script>
+                </div>
+                <div class="highlight"><pre><code class="language-html"></code></pre></div>
+            </div>
+
+            <div>
+                <div class="page-header">
                     <h1 id="table-events">Table Events</h1>
                 </div>
                 <div class="bs-example">

src/bootstrap-table.js

@@ -66,7 +66,7 @@
         data: [],
         method: 'get',
         url: undefined,
-        queryParams: {},
+        queryParams: function(pageSize, pageNumber) {return {};},
         pagination: false,
         sidePagination: 'client', // client or server
         totalRows: 0, // server side need to set
@@ -418,9 +418,10 @@
             $number,
             data = this.searchText ? this.searchData : this.data;
 
-        if (this.options.sidePagination === 'client') {
+        if (this.options.sidePagination !== 'server') {
             this.options.totalRows = data.length;
         }
+
         this.totalPages = 0;
         if (this.options.totalRows) {
             this.totalPages = ~~((this.options.totalRows - 1) / this.options.pageSize) + 1;
@@ -428,11 +429,13 @@
         if (this.totalPages > 0 && this.options.pageNumber > this.totalPages) {
             this.options.pageNumber = this.totalPages;
         }
+
         this.pageFrom = (this.options.pageNumber - 1) * this.options.pageSize + 1;
         this.pageTo = this.options.pageNumber * this.options.pageSize;
         if (this.pageTo > this.options.totalRows) {
             this.pageTo = this.options.totalRows;
         }
+
         html.push(
             '<div class="pull-left pagination">',
                 '<div class="pagination-info">',
@@ -494,50 +497,48 @@
         $number.off('click').on('click', $.proxy(this.onPageNumber, this));
     };
 
+    BootstrapTable.prototype.updatePagination = function() {
+        this.resetRows();
+        this.initPagination();
+        if (this.options.sidePagination === 'server') {
+            this.initServer();
+        } else {
+            this.initBody();
+        }
+    };
+
     BootstrapTable.prototype.onPageListChange = function(event) {
         var $this = $(event.currentTarget);
 
         $this.parent().addClass('active').siblings().removeClass('active');
         this.options.pageSize = +$this.text();
         this.$toolbar.find('.page-size').text(this.options.pageSize);
-        this.resetRows();
-        this.initPagination();
-        this.initBody();
+        this.updatePagination();
     };
 
     BootstrapTable.prototype.onPageFirst = function() {
         this.options.pageNumber = 1;
-        this.resetRows();
-        this.initPagination();
-        this.initBody();
+        this.updatePagination();
     };
 
     BootstrapTable.prototype.onPagePre = function() {
         this.options.pageNumber--;
-        this.resetRows();
-        this.initPagination();
-        this.initBody();
+        this.updatePagination();
     };
 
     BootstrapTable.prototype.onPageNext = function() {
         this.options.pageNumber++;
-        this.resetRows();
-        this.initPagination();
-        this.initBody();
+        this.updatePagination();
     };
 
     BootstrapTable.prototype.onPageLast = function() {
         this.options.pageNumber = this.totalPages;
-        this.resetRows();
-        this.initPagination();
-        this.initBody();
+        this.updatePagination();
     };
 
     BootstrapTable.prototype.onPageNumber = function(event) {
         this.options.pageNumber = +$(event.currentTarget).text();
-        this.resetRows();
-        this.initPagination();
-        this.initBody();
+        this.updatePagination();
     };
 
     BootstrapTable.prototype.initBody = function() {
@@ -550,7 +551,7 @@
             this.$body = $('<tbody></tbody>').appendTo(this.$el);
         }
 
-        if (!this.options.pagination) {
+        if (!this.options.pagination || this.options.sidePagination === 'server') {
             this.pageFrom = 1;
             this.pageTo = data.length;
         }
@@ -643,19 +644,33 @@
     };
 
     BootstrapTable.prototype.initServer = function() {
-        var that = this;
+        var that = this,
+            data = {};
 
         if (!this.options.url) {
             return;
         }
         this.$loading.show();
+
+        if (typeof this.options.queryParams === 'function') {
+            data = this.options.queryParams(this.options.pageSize, this.options.pageNumber);
+        } else if (typeof this.options.queryParams === 'string') {
+            data = eval(this.options.queryParams + '(this.options.pageSize, this.options.pageNumber)');
+        }
+
         $.ajax({
             type: this.options.method,
             url: this.options.url,
-            data: this.options.queryParams,
+            data: data,
             contentType: 'application/json',
             dataType: 'json',
-            success: function(data) {
+            success: function(res) {
+                var data = res;
+
+                if (that.options.sidePagination === 'server') {
+                    that.options.totalRows = res.total;
+                    data = res.rows;
+                }
                 that.load(data);
                 that.options.onLoadSuccess(data);
             },