Merge pull request #665 from djhvscf/master

Added vertical align pagination

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

@@ -345,6 +345,13 @@ The table options is defined in `jQuery.fn.bootstrapTable.defaults`.
         <td>Indicate how to align the custom toolbar. 'left', 'right' can be used.</td>
     </tr>
     <tr>
+        <td>paginationVAlign</td>
+        <td>data-pagination-v-align</td>
+        <td>String</td>
+        <td>'bottom'</td>
+        <td>Indicate how to align the pagination. 'top', 'bottom', 'both' (put the pagination on top and bottom)  can be used.</td>
+    </tr>
+    <tr>
         <td>paginationHAlign</td>
         <td>data-pagination-h-align</td>
         <td>String</td>

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

@@ -334,6 +334,13 @@ Las opciones de la tabla están definidas en `jQuery.fn.bootstrapTable.defaults`
         <td>'left'</td>
         <td>Indica cómo alinear la barra de herramientas customizable. Se puede usar 'left', 'right'.</td>
     </tr>
+    <tr>
+        <td>paginationVAlign</td>
+        <td>data-pagination-v-align</td>
+        <td>String</td>
+        <td>'bottom'</td>
+        <td>Indica cómo alinear la paginación. Se puede usar: 'top', 'bottom', 'both' (coloca la paginación arriba y abajo de la tabla.</td>
+    </tr>
 	<tr>
         <td>paginationHAlign</td>
         <td>data-pagination-h-align</td>

src/bootstrap-table.css

@@ -11,6 +11,17 @@
     border-radius: 1px;
 }
 
+.bootstrap-table
+.table,
+.table>thead>tr>th,
+.table>tbody>tr>th,
+.table>tfoot>tr>th,
+.table>thead>tr>td,
+.table>tbody>tr>td,
+.table>tfoot>tr>td {
+    padding: 8px !important;
+}
+
 .fixed-table-container {
     position: relative;
     clear: both;

src/bootstrap-table.js

@@ -155,9 +155,8 @@
         pageSize: 10,
         pageList: [10, 25, 50, 100],
         paginationHAlign: 'right', //right, left
-        paginationVAlign: 'bottom', //bottom, top
+        paginationVAlign: 'bottom', //bottom, top, both
         paginationDetailHAlign: 'left', //right, left
-        paginationDetailVAlign: 'bottom', //bottom, top
         search: false,
         searchAlign: 'right',
         selectItemName: 'btSelectItem',
@@ -356,6 +355,9 @@
         this.$container = $([
             '<div class="bootstrap-table">',
             '<div class="fixed-table-toolbar"></div>',
+            this.options.paginationVAlign === 'top' || this.options.paginationVAlign === 'both' ?
+                '<div class="fixed-table-pagination" style="clear: both;"></div>' :
+                '',
             '<div class="fixed-table-container">',
             '<div class="fixed-table-header"><table></table></div>',
             '<div class="fixed-table-body">',
@@ -364,7 +366,9 @@
             '</div>',
             '</div>',
             '<div class="fixed-table-footer"><table><tr></tr></table></div>',
-            '<div class="fixed-table-pagination"></div>',
+            this.options.paginationVAlign === 'bottom' || this.options.paginationVAlign === 'both' ?
+                '<div class="fixed-table-pagination"></div>' :
+                '',
             '</div>',
             '</div>'].join(''));
 
@@ -805,11 +809,7 @@
         if (this.options.showToggle) {
             this.$toolbar.find('button[name="toggle"]')
                 .off('click').on('click', function () {
-                    that.options.cardView = !that.options.cardView;
-                    that.initHeader();
-                    // Fixed remove toolbar when click cardView button.
-                    //that.initToolbar();
-                    that.initBody();
+                    that.toggleView();
                 });
         }
 
@@ -1017,7 +1017,8 @@
         html.push('<span class="page-list">');
 
         var pageNumber = [
-                '<span class="btn-group dropup">',
+                sprintf('<span class="btn-group %s">', this.options.paginationVAlign === 'top' || this.options.paginationVAlign === 'both' ?
+                    'dropdown' : 'dropup'),
                 '<button type="button" class="btn btn-default ' + (this.options.iconSize === undefined ? '' : ' btn-' + this.options.iconSize) + ' dropdown-toggle" data-toggle="dropdown">',
                 '<span class="page-size">',
                 $allSelected ? this.options.formatAllRows() : this.options.pageSize,
@@ -2122,7 +2123,8 @@
     BootstrapTable.prototype.toggleView = function () {
         this.options.cardView = !this.options.cardView;
         this.initHeader();
-        this.initToolbar();
+        // Fixed remove toolbar when click cardView button.
+        //that.initToolbar();
         this.initBody();
     };
 

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

@@ -1,6 +1,7 @@
 /**
  * @author: Dennis Hernández
  * @webSite: http://djhvscf.github.io/Blog
+ * @version: v1.0.0
  *
  * @update zhixin wen <wenzhixin2010@gmail.com>
  */

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

@@ -1,6 +1,6 @@
 /**
  * bootstrap-table-flatJSON.js
- * @version: v1.0.0
+ * @version: v1.0.1
  * @author: Dennis Hernández
  * @webSite: http://djhvscf.github.io/Blog
  *
@@ -63,7 +63,7 @@
             function recurse(cur, prop) {
                 if (Object(cur) !== cur) {
                     result[prop] = cur;
-                } else if (Array.isArray(cur)) {
+                } else if ($.isArray(cur)) {
                     for (var i = 0, l = cur.length; i < l; i++) {
                         recurse(cur[i], prop ? prop + "." + i : "" + i);
                         if (l == 0) {

src/extensions/resizable/README.md

@@ -0,0 +1,66 @@
+# Table Resizable
+
+Use Plugin: [bootstrap-table-resizable](https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/resizable) </br>
+Dependence: [colResizable](https://github.com/alvaro-prieto/colResizable) v1.5
+
+## Usage
+
+```html
+<script src="extensions/cookie/bootstrap-table-resizable.js"></script>
+```
+
+## Options
+
+### resizable
+
+* type: Boolean
+* description: Set true to allow the resize in each column.
+* default: `false`
+
+### liveDrag
+
+* type: Boolean
+* description: When set to true the table layout is updated while dragging column anchors. liveDrag enabled is more CPU consuming so it is not recommended for slow computers, specially when dealing with huge or extremely complicated tables.
+* default: `false`
+
+### fixed
+
+* type: Boolean
+* description: It is used to set how the resize method works. In fixed mode resizing a column does not alter total table width, which means that when a column is expanded the next one shrinks. If fixed is set to false then table can change its width and each column can shrink or expand independently.
+* default: `true`
+
+### headerOnly
+
+* type: Boolean
+* description: This attribute can be used to prevent vertical expansion of the column anchors to fit the table height. If it is set to true, column handler's size will be bounded to the first row's vertical size.
+* default: `false`
+
+### minWidth
+
+* type: Integer
+* description: This value specifies the minimum width (measured in pixels) that is allowed for the columns.
+* default: `15`
+
+### hoverCursor
+
+* type: String
+* description: This attribute can be used to customize the cursor that will be displayed when the user is positioned on the column anchors.
+* default: `e-resize`
+
+### dragCursor
+
+* type: String
+* description: Defines the cursor that will be used while the user is resizing a column.
+* default: `e-resize`
+
+### onResizableResize
+
+* type: Function
+* description: If a callback function is supplied it will be fired when the user has ended dragging a column anchor altering the previous table layout. The callback function can obtain a reference to the updated table through the currentTarget attribute of the event retrieved by parameters.
+* default: `empty function`
+
+### onResizableDrag
+
+* type: Function
+* description: This event is fired while dragging a column anchor if liveDrag is enabled. It can be useful if the table is being used as a multiple range slider. The callback function can obtain a reference to the updated table through the currentTarget attribute of the event retrieved by parameters
+* default: `empty function`

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

@@ -0,0 +1,78 @@
+/**
+ * @author: Dennis Hernández
+ * @webSite: http://djhvscf.github.io/Blog
+ * @version: v1.0.0
+ */
+
+(function ($) {
+    'use strict';
+
+    var initResizable = function (el) {
+        var that = el;
+
+        //Deletes the plugin to re-create it
+        $(el.$el).colResizable({disable: true});
+
+        //Creates the plugin
+        $(el.$el).colResizable({
+            liveDrag: that.options.liveDrag,
+            fixed: that.options.fixed,
+            headerOnly: that.options.headerOnly,
+            minWidth: that.options.minWidth,
+            hoverCursor: that.options.hoverCursor,
+            dragCursor: that.options.dragCursor,
+            onResize: that.options.onResizableResize,
+            onDrag: that.options.onResizableDrag
+        });
+    };
+
+    $.extend($.fn.bootstrapTable.defaults, {
+        resizable: false,
+        liveDrag: false,
+        fixed: true,
+        headerOnly: false,
+        minWidth: 15,
+        hoverCursor: 'e-resize',
+        dragCursor: 'e-resize',
+        onResizableResize: function (e) {
+            return false;
+        },
+        onResizableDrag: function (e) {
+            return false;
+        }
+    });
+
+    var BootstrapTable = $.fn.bootstrapTable.Constructor,
+        _init = BootstrapTable.prototype.init,
+        _toggleColumn = BootstrapTable.prototype.toggleColumn,
+        _toggleView = BootstrapTable.prototype.toggleView;
+
+    BootstrapTable.prototype.init = function () {
+        _init.apply(this, Array.prototype.slice.apply(arguments));
+
+        if (this.options.resizable) {
+            initResizable(this);
+        }
+    };
+
+    BootstrapTable.prototype.toggleColumn = function () {
+        _toggleColumn.apply(this, Array.prototype.slice.apply(arguments));
+
+        if (this.options.resizable) {
+            initResizable(this);
+        }
+    };
+
+    BootstrapTable.prototype.toggleView = function () {
+        _toggleView.apply(this, Array.prototype.slice.apply(arguments));
+
+        if (this.options.resizable) {
+            if (this.options.cardView) {
+                //Deletes the plugin
+                $(this.$el).colResizable({disable: true});
+                return;
+            }
+            initResizable(this);
+        }
+    };
+})(jQuery);