dataTable 服务端分页（入门级）

程序东

于 2019-11-17 10:47:54 发布

阅读量2.2k

点赞数 1

分类专栏： Java Web

本文链接：https://blog.csdn.net/weidong_y/article/details/103106404

版权

这篇博客介绍了如何使用DataTable.js实现服务端分页，主要涉及AJAX异步请求，js和Java代码实现，以及关键参数的交互。文章详细讲解了前端配置、分页参数、数据返回格式，并提供了不同写法的示例。

摘要由CSDN通过智能技术生成

简易版 DataTable.js 服务端分页（Java）

引入 js 和 css 文件

可以直接到官网首页，找到下面图片的位置，点击右边的小箭头按钮，你会看到对应的 css 和 js 源码，然后 ctrl+A 把源码复制下来，自己新建个文件存放，再引入到 html 中就行。
在这里插入图片描述

实现原理

dataTable 实现服务端的分页，主要是通过 AJAX 异步请求。先在 js 配置中开启了服务端分页的功能 “serverSide: true”,然后 dataTable 会传指定参数给后台去进行分页操作，然后返回指定参数给前台的 dataTable，dataTable 就会自动渲染表格数据并实现分页。

dataTable 传给服务端的三个必须分页参数：

sEcho：dataTable 用于本身计算次数的，接收等会直接返回即可，不需要作处理。

iDisplayStart：表示从第几行开始查询，比如第一页的话，标识从第 0 行开始查数据，与 mysql 的 limit 的第一个参数吻合，可直接使用，在 Java 代码会介绍到。

iDisplayLength：表示查询多少条，dataTable 默认最少是查询 10 条。

服务端返回给 dataTable 的三个必须分页参数：

draw：将 dataTable 传过来的 sEcho 原封不动赋值给他就行。

recordsTotal：总数据量

recordsFiltered：总数据量

data：返回的数据列表

导入对应的文件

html 代码

<table class="table-sort" >
	<thead>
        <tr class="text-c">
            <th width="25"><input type="checkbox" name="" value="" id="allCheck"></th>
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

js 代码

代码比较清晰简单，该有的注释都有了。比较需要注意的是：fnServerParams，这个参数。是用来设置自定义参数的，比如：你实现了搜索框，搜索框内输入的值要传到后台，就得再 fnServerParams里面设置过去。

注意：

fnServerParams 参数是用来添加自定义传给后台的参数的。

比如：我们实现搜索功能的时候，也希望将搜索的信息列表能够分页展示出来，这时就需要将 “搜索条件” 通过 fnServerParams 来 push 进去 aoData 中，然后传给后台。

<script type="text/javascript">
$(function(){
   
    $('.table-sort').dataTable({
   
        bProcessing: true, //DataTables 载入数据时，是否显示‘进度’提示
        bAutoWidth: false, //自动宽度
        bSort: false, //排序功能
        bInfo: true, //页脚信息,默认为 true
        bStateSave: true, //状态保存
        sPaginationType: "full_numbers

最低0.47元/天解锁文章