第一次动手实现bootstrap table分页效果

下面是实现 Bootstrap Table 分页效果的攻略：

准备工作

在开始前，我们需要先引入 Bootstrap 和 jQuery，可以在头部加入以下代码：

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

此外，还需要引入 Bootstrap Table 框架：

<link rel="stylesheet" href="https://unpkg.com/bootstrap-table/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>

实现分页效果

第一步：HTML结构

在HTML的table标签中，增加 data-pagination="true" 和 data-page-list="[10, 25, 50]" 属性，来开启分页功能和设置分页条目数的选择列表：

<table data-url="./data.json" data-pagination="true" data-page-list="[10, 25, 50]">
<thead>
<tr>
    <th>序号</th>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
</tr>
</thead>
<tbody></tbody>
</table>

第二步：JS代码

我们需要在JS中设置数据来源，以及渲染表格，具体实现如下：

$(function() {
    $('#table').bootstrapTable({
        method: 'get',
        contentType: 'application/json',
        url: './data.json', // 数据来源
        pagination: true,
        sidePagination: 'server', // 分页的方式：client客户端分页，server服务端分页（*）
        pageNumber:1, // 初始化加载第一页，默认第一页
        pageSize: 10, // 每页的记录行数（*）
        pageList: [10,25,50,100], // 可供选择的每页的行数（*）
        search: true, // 是否显示表格搜索
        strictSearch: true,
        showColumns: true, // 是否显示所有的列
        showRefresh: true, // 是否显示刷新按钮
        minimumCountColumns: 2, // 最少允许的列数
        clickToSelect: true, // 是否启用点击选中行
        height: 500, // 表格高度，如果没有设置高度，表格自动根据记录条数觉得表格高度
        queryParams: function(params) {
            // 请求参数
            return {
                "pageSize" : params.pageSize,
                "pageNumber" : params.pageNumber
            };
        },
        columns: [{
            field: 'id',
            title: 'ID'
        }, {
            field: 'name',
            title: '姓名'
        }, {
            field: 'age',
            title: '年龄'
        }, {
            field: 'sex',
            title: '性别'
        }]
    });
});

其中，在 queryParams 函数中，我们可以设置请求的参数，pageSize 和 pageNumber 分别表示每页的行数和当前页数。而在 columns 中，我们需要设置表头的字段名和对应的标题。

示例

下面是一个具体的实现实例：

<table id="table"
       data-url="./data.json"
       data-search="true"
       data-height="460"
       data-pagination="true"
       data-side-pagination="server"
       data-page-number="1"
       data-page-size="10"
       data-page-list="[10, 25, 50, 100]"
       data-query-params="queryParams">
    <thead>
    <tr>
        <th data-field="id">ID</th>
        <th data-field="name">姓名</th>
        <th data-field="age">年龄</th>
        <th data-field="sex">性别</th>
    </tr>
    </thead>
</table>

<script>
    $(function() {
        $('#table').bootstrapTable({
            method: 'get',
            contentType: 'application/json',
            url: './data.json',
            pagination: true,
            sidePagination: 'server',
            pageNumber:1,
            pageSize: 10,
            pageList: [10,25,50,100],
            search: true,
            strictSearch: true,
            showColumns: true,
            showRefresh: true,
            minimumCountColumns: 2,
            clickToSelect: true,
            height: 500,
            queryParams: function(params) {
                return {
                    "pageSize" : params.pageSize,
                    "pageNumber" : params.pageNumber
                };
            },
            columns: [{
                field: 'id',
                title: 'ID'
            }, {
                field: 'name',
                title: '姓名'
            }, {
                field: 'age',
                title: '年龄'
            }, {
                field: 'sex',
                title: '性别'
            }]
        });
    });
</script>

此外，我们还可以根据自己的需求进行样式和功能的定制，具体可以参考 Bootstrap Table 官方文档。