bootstrap分页插件实现跳转指定页面

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源码下载
wx_superpet
个人简历小程序码

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值