bootstrapTable快速增加跳转到指定页

• 一、基本思路与原理
• 二、效果截图
• 三、实现代码

一、基本思路与原理

前提
由于使用

bootstrapTable

早期版本，又不想进行升级，需要在以下前提下增加跳转到指定页支持。
a. 在不升级

bootstrapTable

版本，不使用bootstrapTable-page-jump-to扩展的前提下
b. 不修改bootstrapTable源码。

实现思路
当行数据渲染完成后，向

bootstrapTable-PaginationInfo

增加跳转到指定页控制元素。

实现步骤
1). 在

bootstrapTable

行渲染完成事件

onPostBody

中添加 跳转页输入框和跳转按钮。
2). 增加输入页码校验，限定输入页面范围。
3). 跳转到指定页码实现。

二、效果截图

1). "跳转"功能增加前

2). "跳转"功能增加后

三、实现代码

// 初始化表格
$("#table").bootstrapTable({
url: $.fn.bootstrapTable.defaults.extend.index_url,
pk: 'id',
sortName: 'id',
filter:filter,
pageList:[10,25,50,100],
columns: [
//略过
...
],
onPostBody:function () {
//console.log("行数据渲染完成!");
var totalPages = $("#table").bootstrapTable("getOptions").totalPages;
var pageNumber = $("#table").bootstrapTable("getOptions").pageNumber;
var goInputWidth = 45;//输入框默认宽度
var maxLen = (""+totalPages).length;
//根据总页数设定跳转页面输入框宽度
if (totalPages>999)
goInputWidth = maxLen*10+15;
var $pageGo = $('<span style="padding-left: 5px;">跳转到<input type="number" maxlength="'
+ maxLen+ '" min="1" max="' + totalPages
+ '" class="input-box" id="c_jump-to-page" value="'
+ pageNumber+ '" style="width: '+goInputWidth+'px;" />/'
+ totalPages+'页&nbsp;</span>');
var $go = $("<a href=\"javascript:;\">Go</a>");
$pageGo.append($go);
$(".pagination-detail").append($pageGo);
//页码范围限定(部分浏览器min~max失效时)
$pageGo.change(function () {
var goPage = $('#c_jump-to-page').val();
if (goPage<1)
$('#c_jump-to-page').val(1);
if (goPage>totalPages)
$('#c_jump-to-page').val(totalPages);
});
//跳转到
$go.click(function () {
var goPage = parseInt($('#c_jump-to-page').val());
if (goPage!=pageNumber)
$("#table").bootstrapTable('selectPage', parseInt(goPage));
});
}//end onPostBody:function () {
});