使用DataTables实现服务器端分页
2018-06-16 本文已影响0人
jarWorker
DataTables
DataTables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。
- 分页，即时搜索和排序
- 几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理
- 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
- 各式各样的扩展: Editor, TableTools, FixedColumns ……
- 丰富多样的option和强大的API
- 支持国际化
- 超过2900+个单元测试
- 免费开源
DataTables
<table id="table_id_example" >
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
</table>
DataTables自带分页的功能 $("#table_id_example").DataTable(“省略...”)//只需一句，意思就是：请求获得所有的数据利用DataTables进行分页。看起来DataTables真的是一个好东西呀！这样说有了DataTables还需要后端分页干嘛呢？
但是会存在一个这样的一个问题，请小伙伴们好好思考下。当碰到数据量巨大的情况下，这对于很多系统或者网页来说都是家常的事。一次请求上万条数据最后的显示效果虽然是一样的，也都能展示出相同的数据结果，但是对于时间效率上来说那就天差地别了，没有进行后端分页的话，用户可能会在数据量极大的情况下先疯狂。这样说DataTables还是一个不行的插件。那就大错特错了，那一帮搞代码的，可是贼精得咧。早就为DataTables后端分页铺好了道路。下面我们就言归正传了哈，开始DataTables后端分页的实现步骤。
步骤
1.引入DataTables所依赖的css文件和js文件，还有jquery
jquery.dataTables.min.css或者jquery.dataTables.css
jquery.dataTables.min.js或者jquery.dataTables.js
jquery.min.js
下载地址
下载dataTables.css和dataTables.js
或者：在DataTables CDN上，可以使用下面前两个两个文件，最后一个是jquery。
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">``
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
2.这里简单介绍下本次demo的后端情况，首先业务是为了展示一个汽车信息的列表，数据库总共有35条记录数。后端实现就不再过分描述，这里前台传两个参数，页大小pagesize与当前页码page，如果前端不传这两个参数，默认当前页码为第1页，页大小为10。
数据库数据
3.前端代码html与js
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>汽车列表</title>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- DataTables js -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<!-- bootstrap-->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<style type="text/css">
tr th {text-align: center;}
</style>
<table id="table_id_example" class="table table-bordered no-footer dataTable">
<thead>
<tr >
<th>编号</th>
<th>品牌</th>
<th>价格（万元）</th>
<th>颜色</th>
</tr>
</thead>
</table>
</body>
<script type="text/javascript">
$(document).ready(function() {
$("#table_id_example").DataTable({
language: {
"processing": "处理中...",
"lengthMenu": "_MENU_ 记录/页",
"zeroRecords": "没有匹配的记录",
"info": "第 _START_ 至 _END_ 项记录，共 _TOTAL_ 项",
"infoEmpty": "第 0 至 0 项记录，共 0 项",
"infoFiltered": "(由 _MAX_ 项记录过滤)",
"infoPostFix": "",
"search": "搜索:",
"url": "",
"decimal": ",",
"thousands": ".",
"emptyTable":"未找到符合条件的数据",
"paginate": {
"first": "首页",
"previous": "上页",
"next": "下页",
"last": "末页"
}
},
retrieve: true,
paging: true,
ordering: false,
info: true,
autoWidth: false,
pageLength: 10,//每页显示10条数据
pagingType: "full_numbers", //分页样式：simple,simple_numbers,full,full_numbers，
bFilter: false, //去掉搜索框方法
bLengthChange: true,//也就是页面上确认是否可以进行选择一页展示多少条
serverSide: true, //启用服务器端分页，要进行后端分页必须的环节
ajax: function (data, callback, settings) {
//封装相应的请求参数，这里获取页大小和当前页码
var pagesize = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候,页大小
var start = data.start;//开始的记录序号
var page = (data.start) / data.length + 1;//当前页码
var data = {
page: page,
pagesize: pagesize,//这里只传了当前页和页大小，如果有其他参数，可继续封装
}
var json={
dataArray:JSON.stringify(data)
}
$.ajax({
type: "POST",
url: "/carcontroller/car",
cache : false, //禁用缓存
data: json, //传入已封装的参数
dataType: "json",//返回数据格式为json
success: function(data) {
var arr = "";
if ('object' == typeof data) {
arr = data;
} else {
arr = $.parseJSON(data);//将json字符串转化为了一个Object对象
}
console.log("============数据==========")
console.log(arr)
var returnData = {};
//returnData.draw = arr.data.pagination.pageCount;//这里直接自行返回了draw计数器,应该由后台返回，没什么卵用！
returnData.recordsTotal = arr.data.pagination.totalCount;//totalCount指的是总记录数
returnData.recordsFiltered = arr.data.pagination.totalCount;//后台不实现过滤功能,全部的记录数都需输出到前端，记录数为总数
returnData.data = arr.data.carList;//返回汽车列表
console.log("======returnData.data=======")
console.log(returnData.recordsTotal)
console.log(returnData.recordsFiltered)
callback(returnData);//这个别忘了！！！
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$.dialog.alert("查询失败");
$wrapper.spinModal(false);
}
});
},
columns: [
{"data": "id", "width": "50px", "defaultContent": "<i></i>"},
{"data": "brand", "width": "120px", "defaultContent": "<i></i>"},
{"data": "price", "width": "120px", "defaultContent": "<i></i>"},
{"data": "color", "width": "120px", "defaultContent": "<i></i>"},
]
})
})
</script>
</html>
到此，服务器后端分页的前端代码结束。
其中：
- serverSide: true, //启用服务器端分页，要进行后端分页必须的环节
- ajax: function (data, callback, settings) {}，//添加ajax属性
是必须的两个步骤,也是最关键的步骤。
4.页面展示与数据
数据量10条
这里前端发送ajax请求，页大小pagesize为10（ var pagesize = data.length;），当前页码page为10，如点击
则改变当前页码，而相应的当前页码page（var page = (data.start) / data.length + 1;）。在浏览器控制台中
pagination:{pageCount: 4, pagesize: 10, page: 1, totalCount: 35}
- pageCount:共分为几页
- pagesize:页大小
- page:当前页码
- totalCount:总记录数，后台必须返回
- carList:数据列表
再看一个页大小为50的的页面：
页大小50，当前只有一页
到此，精简版dataTables的服务器端分页demo算是基本完成。
更多，更好的自行封装请求和返回数据的零耦合服务端分页请移步中文官网
天天好心情哦！！！
