bootstrapTable分页的用法

最新推荐文章于 2025-05-26 16:42:37 发布

lxtalent

最新推荐文章于 2025-05-26 16:42:37 发布

阅读量444

点赞数 1

CC 4.0 BY-SA版权

文章标签： bootstrap

本文链接：https://blog.youkuaiyun.com/lxtalent/article/details/106767891

本文详细介绍了如何在bootstrapTable中实现分页功能，包括基本配置、参数设置和使用示例，帮助开发者更好地理解和应用bootstrapTable的分页功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

**

bootstrapTable分页

  function initTable() {
        let ajaxRequest1 = function (request) {
          var pageNumber=request.data.offset
          var pageSize=request.data.limit
          var pageNum=(pageNumber/pageSize)+1
          var page=pageNum
            $.ajax({
                url: `/Ajax请求的接口?pageNum=${page}&pageSize=${pageSize}`,//接口后面的参数用问号拼接的
                type: 'get',
                contentType: 'application/json',
                success: function (res) {
                    request.success({
                        rows: res.data.list, //表格里面展示的数据，所有的数据都在list对象里面
                        total: res.data.total //返回总数
                    })
                    $('#table').bootstrapTable('load', {
                        rows: res.data.list,
                        total: res.data.total,
                    });

                }
            })
        }
 $('#table').bootstrapTable({
            ajax:'ajaxRequest1 ',
            showLoading: true,
            pagination: true,//显示分页条
            sortable: true,
            locale:'zh-CN',
            pageSize: 2, //每页显示的记录数
            pageNumber: 1, //当前第几页
            pageList: [2,4,6],//页数的选择
            striped: true,
            sidePagination: 'server', //s
            online: 'center',
            paginationDetailHAlign:' hidden', //隐藏分页信息
            columns: [{
                checkbox: true,
                formatter: stateFormatter  //复选框的操作
            }, {
                title: '序号',
                formatter: function (value, row, index) {
                    var pageSize = $('#table').bootstrapTable('getOptions')
                        .pageSize;
                    var pageNumber = $('#table').bootstrapTable('getOptions')
                        .pageNumber;
                    return pageSize * (pageNumber - 1) + index + 1;//序号自增随着数据库数据的增加或者减少改变
                }
            }, {
                title: '名称',
                field: 'aaa',
            }, {
                title: '类型',
                field: 'bbb',
                formatter: function (row, value, index) {
                    if (Number(row) === 0) {
                        return `<span>a</span>`
                    } else {
                        return `<span>b</span>`
                    }
                   
                }
            }]

        })
           function stateFormatter(value, row, index) {
            if (row.state == true)
                return {
                    disabled: true, //设置是否可用
                    checked: true //设置选中
                };
            return value;
        }
      }