ソースを参照

Merge pull request #3368 from jwang0512/develop

created a jump-to page extension for bootstrap-table.
文翼 8 年 前
コミット
ae24f1c10a

+ 32 - 0
src/extensions/page-jumpto/README.md

@@ -0,0 +1,32 @@
+# Table Jump-to
+
+## Usage
+
+```html
+<link rel="stylesheet" href="extensions/page-jumpto/bootstrap-table-jumpto.css"></style>
+<script src="extensions/page-jumpto/bootstrap-table-jumpto.js"></script>
+```
+
+## Options
+
+### showJumpto
+
+* type: Boolean
+* description: Set true to enable show 'jump to page'. can be defined via `data-show-jumpto` HTML attributes.
+* default: `false`
+* button style: can be styled via bootstrap-table buttonsClass attributes.
+
+````html
+<table id="my_table_id"
+  data-url="data/url.json"
+  data-id-field="id"
+  data-show-jumpto="true">
+  <thead>
+    <tr>
+      <th class="col-md-1" data-field="id" data-sortable="true" data-align="center">#</th>
+      <th class="col-md-4" data-field="name" data-editable="true">Name</th>
+      <th class="col-md-7" data-field="description" data-editable="true" data-editable-emptytext="Custom empty text.">Description</th>
+    </tr>
+  </thead>
+</table>
+````

+ 8 - 0
src/extensions/page-jumpto/bootstrap-table-jumpto.css

@@ -0,0 +1,8 @@
+.jumpto input {
+    height: 31px;
+    width: 50px;
+    margin-left: 5px;
+    margin-right: 5px;
+    text-align: center;
+    display: inline-block;
+}

+ 52 - 0
src/extensions/page-jumpto/bootstrap-table-jumpto.js

@@ -0,0 +1,52 @@
+/**
+ * @author Jay <jwang@dizsoft.com>
+ */
+
+(function ($) {
+    'use strict';
+    var sprintf = $.fn.bootstrapTable.utils.sprintf;
+
+    $.extend($.fn.bootstrapTable.defaults, {
+        showJumpto: false,
+        exportOptions: {}
+    });
+
+    $.extend($.fn.bootstrapTable.locales, {
+        formatJumpto: function () {
+            return 'GO';
+        }
+    });
+    $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales);
+
+    var BootstrapTable = $.fn.bootstrapTable.Constructor,
+        _initPagination = BootstrapTable.prototype.initPagination;
+
+    BootstrapTable.prototype.initPagination = function () {
+        this.showToolbar = this.options.showExport;
+
+        _initPagination.apply(this, Array.prototype.slice.apply(arguments));
+
+        if (this.options.showJumpto) {
+            var that = this,
+                $pageGroup = this.$pagination.find('ul.pagination'),
+                $jumpto = $pageGroup.find('li.jumpto');
+
+            if (!$jumpto.length) {
+                $jumpto = $([
+                    '<li class="jumpto">',
+                        '<input type="text" class="form-control">',
+                        '<button class="btn' +
+                            sprintf(' btn-%s', this.options.buttonsClass) +
+                            sprintf(' btn-%s', this.options.iconSize) +
+                            '" title="' + this.options.formatJumpto() + '" ' +
+                            ' type="button">'+this.options.formatJumpto(),
+                        '</button>',
+                    '</li>'].join('')).appendTo($pageGroup);
+
+                $jumpto.find('button').click(function () {
+                    that.selectPage(parseInt($jumpto.find('input').val()));
+                });
+            }
+        }
+    };
+})(jQuery);