bootstrap table表格插件之服务器端分页实例代码

下面是关于“bootstrap table表格插件之服务器端分页实例代码”的攻略。

什么是bootstrap table

Bootstrap Table是一个基于jQuery和Bootstrap的jQuery插件，可以在网页中添加现代和简单的表格视图，功能强大、灵活易用。

什么是服务器端分页

服务器端分页就是当表格中数据较多时，不将所有数据一次性加载，而是通过ajax请求服务器数据实现按需加载数据，提高页面渲染的性能，同时也可以减轻服务器的负载。

实现服务器端分页的代码步骤

下面我们就来详细说明一下bootstrap table表格插件之服务器端分页实例代码的实现步骤：

第一步：引入必要的资源文件

首先在页面中引入以下资源文件：

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="//cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>

第二步：配置表格

接下来我们要配置表格，设置表格的属性和参数。代码如下：

$('#table').bootstrapTable({
    url: '/path/to/server',    // 数据请求的url
    method: 'post',            // 请求方式
    striped: true,             // 是否显示间隔色
    cache: false,              // 是否使用缓存
    pagination: true,          // 是否显示分页
    pageList: [10, 20, 50],    // 可选分页数量
    pageNumber: 1,             // 当前页号
    pageSize: 10,              // 每页数量
    search: false,             // 是否显示搜索框
    contentType: 'application/x-www-form-urlencoded',
    columns: [{
        field: 'name',
        title: '名称'
    }, {
        field: 'age',
        title: '年龄'
    }, {
        field: 'gender',
        title: '性别'
    }, {
        field: 'address',
        title: '地址'
    }]
});

第三步：服务器处理请求

接下来我们需要在服务器端处理请求，并将数据返回。请参考以下示例：

$pageNumber = isset($_POST['pageNumber']) ? intval($_POST['pageNumber']) : 1; // 当前页号
$pageSize = isset($_POST['pageSize']) ? intval($_POST['pageSize']) : 10; // 每页数量

// 计算查询起始位置
$start = ($pageNumber - 1) * $pageSize;

// 查询
$sql = "SELECT * FROM `user` ORDER BY `id` DESC LIMIT $start, $pageSize";
$result = $pdo->query($sql);

// 处理结果并输出
$data = array();
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
    $data[] = $row;
}
echo json_encode(array(
    'total' => 100, // 数据总数
    'rows' => $data // 数据数组
));

示例1：增加搜索

我们可以通过在表格中增加搜索框，支持搜索功能。代码如下：

$('#table').bootstrapTable({
    url: '/path/to/server',    // 数据请求的url
    method: 'post',            // 请求方式
    striped: true,             // 是否显示间隔色
    cache: false,              // 是否使用缓存
    pagination: true,          // 是否显示分页
    pageList: [10, 20, 50],    // 可选分页数量
    pageNumber: 1,             // 当前页号
    pageSize: 10,              // 每页数量
    search: true,              // 是否显示搜索框
    contentType: 'application/x-www-form-urlencoded',
    columns: [{
        field: 'name',
        title: '名称'
    }, {
        field: 'age',
        title: '年龄'
    }, {
        field: 'gender',
        title: '性别'
    }, {
        field: 'address',
        title: '地址'
    }]
});

示例2：自定义分页条

我们可以通过添加分页条组件，完全自定义自己的分页条样式。代码如下：

$('#table').bootstrapTable({
    url: '/path/to/server',    // 数据请求的url
    method: 'post',            // 请求方式
    striped: true,             // 是否显示间隔色
    cache: false,              // 是否使用缓存
    pagination: true,          // 是否显示分页
    pageList: [10, 20, 50],    // 可选分页数量
    pageNumber: 1,             // 当前页号
    pageSize: 10,              // 每页数量
    search: false,             // 是否显示搜索框
    contentType: 'application/x-www-form-urlencoded',
    paginationPreText: '上一页',
    paginationNextText: '下一页',
    paginationFirstText: '首页',
    paginationLastText: '尾页',
    paginationHAlign: 'left',
    paginationVAlign: 'bottom',
    paginationDetailHAlign: 'right',
    paginationDetailVAlign: 'top',
    paginationLoop: false,
    paginationSwitch: false,
    paginationSuccessivelySize: 5,
    paginationPagesBySide: 1,
    paginationUseIntermediate: false,
    paginationShowPageGo: false,
    classes: 'table table-hover table-striped',
    columns: [{
        field: 'name',
        title: '名称'
    }, {
        field: 'age',
        title: '年龄'
    }, {
        field: 'gender',
        title: '性别'
    }, {
        field: 'address',
        title: '地址'
    }]
});

以上就是关于“bootstrap table表格插件之服务器端分页实例代码”的完整攻略，希望对你有所帮助。