bootstrap分页插件实现跳转指定页面
效果图
下载js/css:代码下载
在页面引入js和css
<script src="/bootstrap-table-pagejump/bootstrap-table-pagejump.js"></script> <!-- 改成你的路径 -->
<link href="/bootstrap-table-pagejump/bootstrap-table-pagejump.css" rel="stylesheet">
添加 paginationShowPageGo: true
function load() {
$('#exampleTable')
.bootstrapTable(
{
paginationShowPageGo: true,
method: 'get', // 服务器数据的请求方式 get or post
url: prefix + "/list", // 服务器数据的加载地址
// showRefresh : true,
// showToggle : true,
// showColumns : true,
iconSize: 'outline',
toolbar: '#exampleToolbar',
striped: true, // 设置为true会有隔行变色效果
dataType: "json", // 服务器返回的数据类型
pagination: true, // 设置为true会在底部显示分页条
// queryParamsType : "limit",
// //设置为limit则会发送符合RESTFull格式的参数
singleSelect: false, // 设置为true将禁止多选
// contentType : "application/x-www-form-urlencoded",
// //发送到服务器的数据编码类型
pageSize: 10, // 如果设置了分页,每页数据条数
pageNumber: 1, // 如果设置了分布,首页页码
//search : true, // 是否显示搜索框
showColumns: false, // 是否显示内容下拉框(选择显示的列)
sidePagination: "server", // 设置在哪里进行分页,可选值为"client" 或者 "server"
queryParams: function (params) {
return {
//说明:传入后台的参数包括offset开始索引,limit步长,sort排序列,order:desc或者,以及所有列的键值对
limit: params.limit,
offset: params.offset,
memberPhone: $("#memberPhone").val(),
memberGradeId: $("#memberGradeId").val(),
isLock: $("#isLock").val(),
startDate:$('#startDate').val().substr(0,10),
endDate:$('#startDate').val().substr(12,22)
// username:$('#searchName').val()
};
},
// //请求服务器数据时,你可以通过重写参数的方式添加一些额外的参数,例如 toolbar 中的参数 如果
// queryParamsType = 'limit' ,返回参数必须包含
// limit, offset, search, sort, order 否则, 需要包含:
// pageSize, pageNumber, searchText, sortName,
// sortOrder.
// 返回false将会终止请求
columns: [
{
checkbox: true
}
}
使用微信小程序云开发写的个人简历小程序和好玩的关联微信运动遛狗的小程序,内置天气查询功能。欢迎大家扫码体验,项目详情也可到我的置顶博客查看。项目都已在码云上开源,欢迎大家star。wx_superpet这个小程序项目特别适合对微信小程序云开发技术感兴趣的同学参考。
个人简历源码:个人简历码云地址
个人简历源码:
wx_superpet源码:wx_superpet码云地址
wx_superpet源码:wx_superpet在CSDN源码下载