bootstrap-table表格分页的时候需要每页显示不同条数的数据

在项目中由于特殊需要,每页显示的数据条数是不一样的,如第一页显示的是10条数据,那么第二页有可能显示的就是20天,第三页显示的就是13条,由于传统的bootstraptable每页显示的是固定页数的值,所以无法实现这个目的

解决办法,引入

bootstrap-paginator.min.js

分页插件,将分页单独管控起来,插件可以在网上自行下载

至于每页显示的条数,我的解决办法是给bootstrap-table配置的pageSize设置成一个较大的值,意思就是每次请求不管返回的是10条,还是30条还是100条都全部显示(因为每一页显示的数据是不固定的,只能返回多少条就显示多少条,事先是不知道的)

 pagination: false,
 pageSize: 10000,
 pageList: [10, 15, 20, 25],

禁用掉bootstrap-table的分页

然后初始化bootstrap-paginator的分页

var currentPage = 1;
var pageCurrent = 1;
var pageSum = Number('${message_count}')//总页数事先获得
        $("#pagination").bootstrapPaginator({
            bootstrapMajorVersion: 3,
            currentPage: pageCurrent,// 显示第几页
            totalPages: pageSum,// 总页数
            numberOfPages:100,
            itemTexts: function (type, page, current) {//如下的代码是将页眉显示的中文显示我们自定义的中文。
                 switch (type) {
                     case "first": return "首页";
                     case "prev": return "上一页";
                     case "next": return "下一页";
                     case "last": return "末页";
                     case "page": return page;
                 }
            },
            onPageClicked: function (event,originalEvent,type,page) {
                // 把当前点击的页码赋值给currentPage, 调用ajax,渲染页面
                currentPage = page
                $('#detailTable').bootstrapTable('refresh')
            }
        })

这里需要注意一下,因为表格的请求参数中pageNumber:currentPage,所以当currentPage更新的时候,然后刷新表格,获取的就是当前页码对应的数据

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Bootstrap Table 可以通过 AJAX 请求从后端获取数据并在表格显示。下面是一些实现的步骤: 1. 在 HTML 页面中引入 Bootstrap Table 插件的 CSS 和 JS 文件。 ```html <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.js"></script> ``` 2. 创建一个 HTML 表格,并定义每一列的名称和字段名。 ```html <table id="table"> <thead> <tr> <th data-field="id">ID</th> <th data-field="name">Name</th> <th data-field="price">Price</th> </tr> </thead> </table> ``` 3. 初始化表格,并配置 AJAX 请求参数。 ```javascript $(function () { $('#table').bootstrapTable({ url: '/path/to/server', // 后端 API 地址 method: 'get', // 请求方法 dataType: 'json', // 返回数据类型 pagination: true, // 启用分页功能 sidePagination: 'server', // 分页位置,此处为服务器端分页 queryParams: function (params) { // 自定义查询参数 return { limit: params.limit, // 每页显示的记录数 offset: params.offset, // 当前页码 search: params.search // 搜索关键字 }; }, responseHandler: function (res) { // 自定义响应处理函数 return { total: res.total, // 总记录数 rows: res.data // 当前页记录列表 }; }, columns: [{ field: 'id', title: 'ID' }, { field: 'name', title: 'Name' }, { field: 'price', title: 'Price' }] }); }); ``` 4. 在后端编写 API 接口,接收请求参数并返回 JSON 格式的数据。 ```php // 获取请求参数 $limit = $_GET['limit']; $offset = $_GET['offset']; $search = $_GET['search']; // 查询数据库,获取数据列表和总记录数 // ... // 返回 JSON 格式的数据 echo json_encode([ 'total' => $total, 'data' => $data ]); ``` 这样就可以通过 AJAX 请求从后端获取数据并在表格显示了。需要注意的是,后端 API 必须返回 JSON 格式的数据数据格式要与响应处理函数中返回的格式一致。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值