使用dataTable完成客户端分页

什么是dataTable

dataTable是一个分页插件，可以使用客户端分页(一次性拉去所有数据，在客户端进行分页操作，适用于数据较少的情况，或者偷懒的时候用?)也可以使用服务端分页(每显示一页就拉取一页的数据，适用于大量数据的情况)；
这里介绍一下客户端分页的使用~233

开始使用dataTable

使用插件当然就需要先导入插件的源码了，我这里使用的插件目录结构如下

因为原生jQuery的样式不太好看，所以使用了bootstrap整合好的样式
1、第一步导入资源

<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" /><!--导入bootstrap样式，如果不用bootstrap的风格可不导-->
<link href="bootstrap-3.3.7-dist/datatables_plugins/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet" /><!-- 导入dataTable的bootstrap的样式 -->
<script src="js/jquery-3.1.1.min.js"></script><!--导入jQuery-->
<script src="bootstrap-3.3.7-dist/datatables_plugins/jquery.dataTables.min.js"></script><!--导入dataTable-->
<!--导入dataTable结合bootstrap的js-->
<script src="bootstrap-3.3.7-dist/datatables_plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>

注意路径别写了错了，还有就是记得导入jQuery
2、在页面创建一个table标签，这就看自己想把表格放哪里去了

    <!-- 省略其它布局代码 --><table class="table table-bordered table-hover" id="infoTable"></table>

3、在JS中初始化dataTable表格

     var oTable;//定义变量名，用于存放dataTable对象，一般定义为全局的比较好var root = $("#root").val();//获取系统上下文路径，若为在页面配置请忽略$(function () {//jQuery方法，在document全部加载完毕时执行initialDataTable();//调用自定义函数});//定义一个函数：用于初始化datatable  function initialDataTable() {//使用客户端分页，一次性拉去所有数据$.ajax({//使用ajax的方式获取url:root+"/admin/station/datatable",//异步请求的接口地址method:"post",//请求方式dataType:"json",//期待的数据返回类型async:true,//是否异步data:{},//请求参数，如果有可添加，键值对的形式或者JSON字符串都可以，根据后台来success:function (data) {//服务器响应成功后执行的回调//初始化datatableif (typeof oTable != "undefined"){//如果已经被实例化，则销毁再实例化oTable.fnDestroy();}oTable = $("#infoTable").dataTable({//注意#infoTable是需创建为dataTable的表格,使用jQuery选择器"bPaginate":true,//是否翻页功能"sServerMethod":"POST",//若使用服务端分页，则设置请求方式为“POST”，可改"bServerSide":false,//是否开启服务端分页(不开就是客户端分页)"bProcessing":true,//是否显示加载ing"bFilter":false,//是否开启过滤"bSort":true,//是否开启排序"searching":true,//是否开启搜索功能"data":data.stations,//若使用客户端分页，则将表格的数据填写到data属性中，需要数组,数组里面要求是对象"aoColumns":[//渲染每一列，其实就是配置表头和数据对应显示到哪一列中{"mData":"id",//读取数组的对象中的id属性"sTitle":"序号",//表头"width":"50px",//设置宽度,不设置的话就是自动分配"mRender":function (d,type,full,meta) {//如果需要显示的内容需根据数据封装加工的就写这个属性，0//回调中有4个参数，d：对应mData中的属性的值；type：对应值的类型；full：对应当前这一行的数据，meta对应dataTable的配置//如果不清楚可以使用console.log();打印出来看看return meta.row+1+meta.settings._iDisplayStart;}},{"mData":"name","sTitle":"站点名称"},{"mData":"id","sTitle":"操作","width":"180px","mRender":function (d,type,full,meta) {var str = "";str = '<button class="btn btn-primary" onclick=\'modifyObj('+JSON.stringify(full)+')\'><i class=\'fa fa-pencil\' aria-hidden=\'true\'></i>编辑</button>'str += '<button class="btn btn-primary" style="margin-left: 10px;" onclick=\'deleteObj('+JSON.stringify(full)+')\'><i class=\'fa fa-trash\' aria-hidden=\'true\'></i>删除</button>';return str;}}]});}});}var oLanguageLeoCN = {'sProcessing' : ' 处理中... ','sLengthMenu' : ' 显示  _MENU_ 项结果 ','sZeroRecords' : ' 没有匹配结果 ','sInfo' : ' 显示第_START_至_END_项结果，共_TOTAL_项 ','sInfoEmpty' : ' 显示第0至0项结果，共0项 ','sInfoFiltered' : ' (由_MAX_项结果过滤) ','sInfoPostFix' : '  ','sSearch' : ' 搜索: ','sUrl' : ' ','sEmptyTable' : ' 表中数据为空 ','sLoadingRecords' : ' 载入中... ','sInfoThousands' : ' , ','oPaginate' : {'sFirst' : ' 首页 ','sPrevious' : ' 上页 ','sNext' : ' 下页 ','sLast' : ' 末页 '},'oAria' : {'sSortAscending' : ' :以升序排列此列','sSortDescending' : ' :以降序排列此列 '}};$.fn.DataTable.defaults.oLanguage = oLanguageLeoCN;//设置提示为中文

4、接下来就是获取数据的接口了，这个就看自己的后台来了，我使用的是spring MVC，贴一个示例代码

 /*** 使用datatable客户端分页获取站点集数据用* @return*/@RequestMapping(value="/station/datatable",method = RequestMethod.POST)@ResponseBodypublic Map<String,Object> getStationsByDatatable(){Map<String,Object> map = new HashMap<>();try {//省略其它属性定义代码//调用service方法获取所有站点信息List<Station> stations = this.wayService.getStations();map.put("code",1);map.put("msg","获取数据成功！");map.put("stations",stations);}catch (Exception e){e.printStackTrace();map.put("code",-1);map.put("msg","获取数据失败！");map.put("stations",null);}return map;}

5、当这写都配置好了之后，接下来就是见证奇迹的时候~233
结果图

需要注意的就是路径记得改成自己的。

资源地址

接下来附上博客使用的资源的地址，需要可自取
百度网盘地址：链接: https://pan.baidu.com/s/17y7Snxz4sx9XXLhWWuq18g 提取码: 2eiy 复制这段内容后打开百度网盘手机App，操作更方便哦
项目的GitHub地址：https://github.com/jamesluozhiwei/bus.git
CSDN下载地址：https://download.csdn.net/download/qq_38403662/10862576

有问题和不足欢迎留言讨论