1

ly-sniper · Jan 20, 2018 · f6e923f · f6e923f
1 parent 503aaae
commit f6e923f
Show file tree

Hide file tree

Showing 6 changed files with 248 additions and 0 deletions.
diff --git a/src/extensions/page-jump/README.md b/src/extensions/page-jump/README.md
@@ -0,0 +1,26 @@
+# Table Page Jump
+
+## Usage
+
+```html
+<link rel="stylesheet" href="extensions/page-jump/bootstrap-table-pagejump.css"></style>
+<script src="extensions/page-jump/bootstrap-table-pagejump.js"></script>
+```
+
+## Options
+
+### paginationShowPageGo
+
+* type: Boolean
+* description: Set true to enable show 'Page Jump'. 
+* default: `false`
+
+## Language
+
+```
+<script src="src/locale/bootstrap-table-zh-CN.js"></script>
+```
+
+## ex
+
+![](demo.png)
diff --git a/src/extensions/page-jump/bootstrap-table-pagejump.css b/src/extensions/page-jump/bootstrap-table-pagejump.css
@@ -0,0 +1,49 @@
+.pagination-jump {
+    margin: 0;
+}
+
+.pagination-jump {
+    display: inline-block;
+    padding-left: 1px;
+    border-radius: 4px;
+}
+
+.pagination-jump>li {
+    display: inline;
+}
+
+.pagination-jump>li>a, .pagination-jump>li>input, .pagination-jump>li>span {
+    position: relative;
+    float: left;
+    margin-left: -1px;
+    line-height: 1.42857143;
+    color: #337ab7;
+    text-decoration: none;
+    background-color: #fff;
+}
+
+.pagination-jump>li>a {
+    padding: 6px 12px;
+    border: 1px solid #ddd;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+
+.pagination-jump>li>input {
+    padding: 6px 0px;
+    border: 1px solid #ddd;
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+    width: 36px;
+    text-align: center;
+}
+
+.pagination-jump>li>span{
+    padding: 6px 3px 6px 12px;
+}
+
+
+.pagination-jump>li>.jump-go {
+    margin-left: 0;
+    padding: 6px;
+}
diff --git a/src/extensions/page-jump/bootstrap-table-pagejump.js b/src/extensions/page-jump/bootstrap-table-pagejump.js
@@ -0,0 +1,57 @@
+/**
+ * @author zhaoshuxue <[email protected]>
+ * extensions: https://github.com/zhaoshuxue/bootstrap-table/src/extensions/page-jump
+ */
+
+(function ($) {
+    'use strict';
+    $.extend($.fn.bootstrapTable.defaults, {
+        // 默认不显示
+        paginationShowPageGo: false
+    });
+
+    $.extend($.fn.bootstrapTable.locales, {
+        pageGo: function () {
+            return 'Page Jump';
+        }
+    });
+    $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales);
+
+    var BootstrapTable = $.fn.bootstrapTable.Constructor,
+        _initPagination = BootstrapTable.prototype.initPagination;
+
+    BootstrapTable.prototype.initPagination = function() {
+        _initPagination.apply(this, Array.prototype.slice.apply(arguments));
+        if(this.options.paginationShowPageGo){
+            var html = [];
+
+            html.push(
+                '<ul class="pagination-jump">',
+                '<li class=""><span>' + this.options.pageGo() + ':</span></li>',
+                '<li class=""><input type="text" class="page-input" value="' + this.options.pageNumber + '"   /></li>',
+                '<li class="page-go"><a class="jump-go" href="">GO</a></li>',
+                '</ul>');
+            this.$pagination.find('ul.pagination').after(html.join(''));
+
+            this.$pagination.find('.page-go').off('click').on('click', $.proxy(this.onPageGo, this));
+            this.$pagination.find('.page-input').off('keyup').on('keyup', function(){
+                this.value = this.value.length == 1 ? this.value.replace(/[^1-9]/g,'') : this.value.replace(/\D/g,'');
+            });
+        }
+    };
+
+    BootstrapTable.prototype.onPageGo = function (event) {
+        // var $this = $(event.currentTarget);
+        var $toPage=this.$pagination.find('.page-input');
+
+        if (this.options.pageNumber === +$toPage.val()) {
+            return false;
+        }
+        this.selectPage(+$toPage.val());
+        // this.options.pageNumber = +$toPage.val();
+
+        // this.updatePagination(event);
+        // $this.prev().find('input').val(this.options.pageNumber);
+        return false;
+    };
+})(jQuery);
diff --git a/src/extensions/page-jump/demo.png b/src/extensions/page-jump/demo.png
diff --git a/src/extensions/page-jump/index.html b/src/extensions/page-jump/index.html
@@ -0,0 +1,113 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <title>DEMO</title>
+  <meta charset="utf-8">
+  <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
+
+  <link href="../../../dist/bootstrap-table.min.css" rel="stylesheet">
+  <link href="bootstrap-table-pagejump.css" rel="stylesheet">
+
+</head>
+
+<body>
+
+
+  <table id="table"></table>
+
+
+
+  <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
+
+  <script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
+
+  <script src="../../../dist//bootstrap-table.min.js"></script>
+
+  <script src="bootstrap-table-pagejump.js"></script>
+
+  <!-- <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script> -->
+  <script src="../../locale/bootstrap-table-zh-CN.js"></script>
+
+
+  <script>
+    $(function() {
+
+      $("#table").bootstrapTable({
+        // url: 'http://localhost:8899/data.json',
+        // sidePagination: 'server', //设置为服务器端分页
+        data:[{
+            name: "aaa",
+            age: 1
+        },{
+            name: "bbb",
+            age: 0
+        },{
+            name: "ccc",
+            age: 2
+        }],
+        sidePagination: 'client', //设置为服务器端分页
+        pagination: true,
+        paginationShowPageGo: true,
+        showJumpto: true,
+        pageList: [10, 20],
+        pageSize: 1,
+        pageNumber: 1,
+        sortName: 'id',
+        sortOrder: 'desc',
+        clickToSelect: true,
+
+        showExport: true,
+
+        columns: [{
+            checkbox: true,
+            align: 'center'
+          },
+          {
+            field: 'name',
+            title: '姓名',
+            align: 'center',
+            valign: 'middle'
+          },
+          {
+            field: 'age',
+            title: '性别',
+            align: 'center',
+            valign: 'middle',
+            formatter: function(value, row, index) {
+              var text = '-';
+              if (value == 1) {
+                text = "男";
+              } else if (value == 0) {
+                text = "女";
+              }
+              return text;
+            }
+          },
+          {
+            field: 'id',
+            title: '操作',
+            align: 'center',
+            valign: 'middle',
+            formatter: function(value, row, index) {
+              return '<button class="btn btn-primary btn-sm">编辑</button>';
+            }
+          }
+        ],
+        onLoadSuccess: function() { //加载成功时执行
+          console.info("加载成功");
+        },
+        onLoadError: function() { //加载失败时执行
+          console.info("加载数据失败");
+        }
+
+      });
+
+
+
+
+    });
+  </script>
+</body>
+
+</html>
diff --git a/src/locale/bootstrap-table-zh-CN.js b/src/locale/bootstrap-table-zh-CN.js
@@ -38,6 +38,9 @@
         },
         formatClearFilters: function () {
             return '清空过滤';
+        },
+		pageGo: function () {
+            return '跳转到';
         }
     };