使用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) {//服务器响应成功后执行的回调
                    //初始化datatable
                    if (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)
    @ResponseBody
    public 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
优快云下载地址：https://download.youkuaiyun.com/download/qq_38403662/10862576

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