jquery datatable服务端分页

jQuery Datatable是一个基于jQuery的插件，它是一种表格控件，提供了丰富的功能，例如：分页、排序、搜索、过滤、分组、导出等。jquery datatable服务端分页就是将数据从服务端获取，分页显示在前端，而不是将所有数据一次性显示在前端，以提高数据处理效率。下面是jquery datatable服务端分页的完整攻略：

步骤一：引入jQuery库和jQuery Datatable库

在html文件的头部引入jQuery和jQuery Datatable的库文件，示例如下：

<!-- 引入jQuery库 -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<!-- 引入jQuery Datatable库 -->
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/datatables/1.10.16/css/dataTables.bootstrap.min.css"/>
<script type="text/javascript" src="https://cdn.bootcss.com/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/datatables/1.10.16/js/dataTables.bootstrap.min.js"></script>

步骤二：在前端页面定义一个表格

在html文件中，创建一个table标签，其中thead标签定义表头，tbody标签定义表体，示例如下：

<table id="example" class="table table-striped table-bordered" style="width:100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>城市</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

步骤三：在服务端编写数据接口

服务端编写一个数据接口，用于返回分页数据的JSON格式，例如php代码如下：

<?php
header("Content-Type: application/json;charset=utf-8");

// 当前页码
$start = $_REQUEST["start"];

// 每页显示的条数
$length = $_REQUEST["length"];

// 排序列的索引值
$column = $_REQUEST["order"][0]["column"];

// 排序方式 ASC或DESC
$dir = $_REQUEST["order"][0]["dir"];

// 查询记录总数
$total = 100;

// 构造分页SQL语句，例如：
// SELECT * FROM table LIMIT $start, $length ORDER BY column $dir
$data = array();
for ($i = $start; $i < ($start + $length); $i++) {
    $data[] = array(
        "id" => $i + 1,
        "name" => "张三" . $i,
        "age" => "20" . $i,
        "gender" => "男",
        "city" => "北京"
    );
}

// 将数据转换成json格式输出
echo json_encode(array(
    "draw" => isset($_REQUEST["draw"]) ? intval($_REQUEST["draw"]) : 1,
    "recordsTotal" => $total,
    "recordsFiltered" => $total,
    "data" => $data
));
?>

步骤四：在前端页面中初始化datatable

在html文件中，编写JavaScript代码，通过ajax异步请求服务端分页数据，并初始化datatable，示例如下：

$(document).ready(function () {
    $('#example').DataTable({
        "processing": true, // 显示处理中动画
        "serverSide": true, // 开启服务器模式
        "ajax": {
            "url": "data.php", // 数据接口
            "dataType": "json", // 返回的数据类型
            "type": "POST", // 请求方式
            "data": function (d) {
                d.start = d.start;
                d.length = d.length;
                d.order = [{
                    "column": d.order[0].column,
                    "dir": d.order[0].dir
                }];
            },
            "error": function (xhr, error, thrown) { // 请求失败时调用
                alert("请求失败，请稍后再试！");
            }
        },
        "columns": [ // 定义每列数据对应返回数据中的名称
            {"data": "id"},
            {"data": "name"},
            {"data": "age"},
            {"data": "gender"},
            {"data": "city"}
        ]
    });
});

示例一：带搜索框的服务端分页

在html文件中添加一个搜索框，当输入关键字并点击搜索按钮时，通过ajax异步请求服务端分页数据，并重新加载datatable数据，示例如下：

<div class="row">
    <div class="col-sm-6">
        <div id="example_filter" class="dataTables_filter">
            <label>Search:
                <input type="text" class="form-control input-sm" placeholder="" aria-controls="example">
            </label>
            <button type="button" class="btn btn-primary" onclick="search()">搜索</button>
        </div>
    </div>
</div>

function search() {
    var keyword = $("#example_filter input").val(); // 获取搜索框中的关键字
    var datatable = $("#example").DataTable(); // 获取datatable对象
    datatable.search(keyword).draw(); // 设置搜索关键字，并重新加载数据
}

示例二：带分页按钮的服务端分页

在html文件中添加一个分页按钮组件，当点击不同的按钮时，通过ajax异步请求服务端分页数据，并重新加载datatable数据，示例如下：

<div class="row">
    <div class="col-sm-12">
        <ul id="example_paginate" class="pagination pull-right"></ul>
    </div>
</div>

function get(page) {
    var datatable = $("#example").DataTable(); // 获取datatable对象
    datatable.page(page).draw(false); // 点击分页按钮，切换当前页码
}

$(document).ready(function () {
    var total = 100;
    var pages = Math.ceil(total / 10);
    var html = "";
    for (var i = 0; i < pages; i++) {
        html += '<li class="paginate_button ' + (i == 0 ? 'active' : '') + '"><a href="javascript:get(' + i + ')">' + (i + 1) + '</a></li>';
    }
    $("#example_paginate").html(html); // 动态生成分页按钮组件
});