简易版 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: