自定义Bootstrap-Table扩展——分页跳转到指定页码

Bootstrap-Table是一个非常棒的基于 Bootstrap 的 jQuery 表格插件，但一开始分页组件不支持跳转到指定页码，所以就打算自己扩展一下。

官方源码地址： https://github.com/wenzhixin/bootstrap-table

下面就是扩展的js代码，里面关键地方都加了注释，相信懂点js的人一眼就能看明白。

bootstrap-table-pagejump.js

(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 $toPage=this.$pagination.find('.page-input');
// 当前页不做处理
if (this.options.pageNumber === +$toPage.val()) {
return false;
}
// 调用官方的函数
this.selectPage(+$toPage.val());
return false;
};
})(jQuery);

当然也要加些样式，使显示效果跟官方的一致

bootstrap-table-pagejump.css

.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;
}

以上所有代码可以到github上下载

https://github.com/zhaoshuxue/bootstrap-table/tree/develop/src/extensions/page-jump

使用方法

添加样式文件

<link href="bootstrap-table-pagejump.css" rel="stylesheet">

添加扩展js文件

<script src="bootstrap-table-pagejump.js"></script>

如果显示中文的话，添加方言js文件

<script src="../../locale/bootstrap-table-zh-CN.js"></script>

> 里面扩展写法为：
> formatClearFilters: function () {
return '清空过滤';
},
pageGo: function () {
return '跳转到';
}

在渲染表格的js代码中添加

paginationShowPageGo: true,

即可

$("#table").bootstrapTable({
pagination: true,
paginationShowPageGo: true,
columns: []
});

最后显示效果如下

后记，其实官方作者在17年下半年也提供了跳转到指定页的扩展

用法也差不多，具体代码请移步

https://github.com/zhaoshuxue/bootstrap-table/tree/develop/src/extensions/page-jumpto

参考文章：

http://blog.csdn.net/lhtzbj12/article/details/77170489