使用dataTable实现服务端分页_JavaScript

实现dataTable服务端分页

在上一篇文章中介绍了客户端分页的使用(https://blog.csdn.net/qq_38403662/article/details/85066142)，这里介绍一下服务端分页的使用。

什么是服务器模式？

是不是发现在处理太多 DOM 数据或者 AJAX 一次性把数据获得后，DataTables 表现的不是很满意？这是肯定的，因为 DT 需要渲染，创建 tr/td ,所以数据越多，速度就越慢。为了解决这个问题 DataTables 提供了服务器模式，把本来客户端所做的事情交给服务器去处理，比如排序（order）、分页（paging）、过滤（filter）。对于客户端来说这些操作都是比较消耗资源的，所以打开服务器模式后不用担心这些操作会影响到用户体验。

当你打开服务器模式的时候，每次绘制表格的时候，DataTables 会给服务器发送一个请求（包括当前分页，排序，搜索参数等等）。DataTables 会向服务器发送一些参数去执行所需要的处理，然后在服务器组装好相应的数据返回给 DataTables。

页面代码

省略插件导入代码~
首先页面
页面部分需要写的只是一个table标签，可根据自己的需求加上相应的样式和布局

 <!-- 搜索条件 可省略~~~2333主要是JS代码 -->
    <div class="content">
        <div class="content-panel">
            <div class="row">
                <form id="form_condition">
                    <div class="row">
                        <div class="col-lg-6 form-group">
                            <label>姓名</label>
                            <input type="text" name="name" class="form-control"/>
                        </div>
                        <div class="col-lg-6 form-group">
                            <label>驾驶证编号</label>
                            <input type="text" name="driverCard" class="form-control"/>
                        </div>
                    </div>
                   <div class="row">
                       <div class="col-lg-6 form-group">
                           <label>性别</label>
                           <select name="sex" class="form-control">
                               <option value="">全部</option>
                               <option value="男">男</option>
                               <option value="女">女</option>
                           </select>
                       </div>
                       <div class="col-lg-6 form-group">
                           <label>手机号</label>
                           <input type="text" name="mobile" class="form-control"/>
                       </div>
                   </div>
                   <div class="row">
                       <div class="col-lg-6 form-group">
                           <label>状态</label>
                           <select name="state" class="form-control">
                               <option value="">全部</option>
                               <option value="0">就职状态</option>
                               <option value="-1">离职状态</option>
                           </select>
                       </div>
                       <div class="col-lg-6 form-group text-right">
                           <label style="display: block;">&nbsp;</label>
                           <a class="btn btn-success" th:href="${#httpServletRequest.getContextPath()+'/admin/driver/edit'}" >添加</a>
                           <button class="btn btn-success" type="button" onclick="datatableInitial()">查询</button>
                           <button class="btn btn-success" type="reset" >重置</button>
                       </div>
                   </div>
                </form>
            </div>
        </div>
    </div>
    <!-- 数据表格展示区 -->
    <div class="content">
        <div class="content-panel">
            <div class="row">
            	<!-- 表格 -->
                <table class="table table-bordered table-hover" id="driverListTable"></table>
            </div>
        </div>
    </div>

JS代码

当开启了服务器模式时，DataTables 会发送如下参数到服务器

ps:需要说明的是

如果你是 Java 开发者，那么使用struts2的需要注意，会有错误抛出，因为处理不了类似 columns[i][search][regex]的变量
如果是你 .net 开发者，那么可能会遇到 maxQueryStringLength 的错误
如果是你 php 开发者，那么恭喜你，php天生支持以上参数的解析，自动转为数组，好不公平啊

名称	类型	描述
draw(sEcho)	integer	绘制计数器。这个是用来确保Ajax从服务器返回的是对应的（Ajax是异步的，因此返回的顺序是不确定的）。要求在服务器接收到此参数后再返回
start(iDisplayStart)	integer	第一条数据的起始位置，比如0代表第一条数据
length(iDisplayLength)	integer	告诉服务器每页显示的条数，这个数字会等于返回的 data集合的记录数，可能会大于因为服务器可能没有那么多数据。这个也可能是-1，代表需要返回全部数据(尽管这个和服务器处理的理念有点违背)

这里就只介绍几个必须的，更多全局搜索、排序等参数传递请参阅官网
举个栗子：
服务端分页传递参数案例
js代码：

	    var oTable;
        $(function () {
            datatableInitial();
        });
        /**
         * 构建datatable
         */
        function datatableInitial(){
            if (typeof oTable == "undefined"){
                oTable = $("#driverListTable").dataTable({
                    "bPaginate":true,//翻页功能
                    "sServerMethod":"POST",//请求方式
                    "bServerSide":true,//是否开启服务端分页
                    "bProcessing":true,//是否显示加载ing
                    "bFilter":false,//是否开启过滤
                    "bSort":false,//是否开启排序
                    "sAjaxSource":"admin/driver",//请求地址
                    "fnServerParams":function (aoData) {//查询条件，额外参数,
                        var $form = $("#form_condition");//如果没有额外参数请省略
                        aoData.push({
                                "name":"name",
                                "value":$form.find("[name=name]").val()
                        });
                        aoData.push({
                            "name":"driverCard",
                            "value":$form.find("[name=driverCard]").val()
                        });
                        aoData.push({
                            "name":"sex",
                            "value":$form.find("[name=sex]").val()
                        });
                        aoData.push({
                            "name":"mobile",
                            "value":$form.find("[name=mobile]").val()
                        });
                        aoData.push({
                            "name":"state",
                            "value":$form.find("[name=state]").val()
                        });
                    },
                    "aoColumns":[{//每一列对应的数据
                        "mData":"id",
                        "sTitle":"序号",
                        "mRender":function (data,type,full,meta) {//不清楚参数内的数据的可使用console.log();打印出来看看
                            return meta.row+1+meta.settings._iDisplayStart;
                        }
                    },{
                        "mData":"name",
                        "sTitle":"姓名"
                    },{
                        "mData":"driverCard",
                        "sTitle":"驾驶证编号"
                    },{
                        "mData":"sex",
                        "sTitle":"性别"
                    },{
                        "mData":"age",
                        "sTitle":"年龄"
                    },{
                        "mData":"mobile",
                        "sTitle":"手机"
                    },{
                        "mData":"state",
                        "sTitle":"状态",
                        "mRender":function (data,type,full,meta) {
                            return data == 0?"就职状态":"离职状态";
                        }
                    },{
                        "mData":"id",
                        "sTitle":"操作",
                        "width":"15%",
                        "mRender":function (data,type,full,meta) {
                            var str = "";
                            str += "<a  href='"+root+"/admin/driver/edit/"+data+"' class='btn btn-primary'><i class='fa fa-pencil' aria-hidden='true'></i>编辑</a>";
                            str += "<button type='button' onclick='deleteDriver("+JSON.stringify(full)+")' class='btn btn-primary' style='margin-left: 10px;'><i class='fa fa-trash' aria-hidden='true'></i>删除</button>";
                            return str;
                        }
                    }]
                });
            } else{
                // oTable.fnClearTable(0);
                var oSettings = oTable.fnSettings();
                //注意下面的driverListTable是你需挂载的表格的id
                oSettings._iDisplayLength = parseInt($(
                    '[name=driverListTable_length] option:selected').val());
                $('.dataTables_length select').val(
                    $('[name=driverListTable_length] option:selected').val());
                //oSettings._iDisplayStart = 0;
                oTable.fnDraw();//重绘表格
            }
        }

后台处理

一旦 DataTables 发送了请求，上面的参数就会传送给服务器，那么你需要接受到这些参数并做相应的逻辑处理然后按照下面的格式讲组装好的JSON数据返回（不是每个参数都需要接受处理，根据自己的业务需要）

名称	类型	描述
draw(sEcho)	integer	必要。上面提到了，Datatables发送的draw是多少那么服务器就返回多少。这里注意，作者出于安全的考虑，强烈要求把这个转换为整形，即数字后再返回，而不是纯粹的接受然后返回，这是为了防止跨站脚本（XSS）攻击。
recordsTotal(iTotalRecords)	integer	必要。即没有过滤的记录数（数据库里总共记录数）
recordsFiltered(iTotalDisplayRecords)	integer	必要。过滤后的记录数（如果有接收到前台的过滤条件，则返回的是过滤后的记录数）
data(aaData)	array	必要。表中中需要显示的数据。这是一个对象数组，也可以只是数组，区别在于纯数组前台就不需要用 columns绑定数据，会自动按照顺序去显示，而对象数组则需要使用 columns绑定数据才能正常显示。注意这个 data的名称可以由 ajaxOption ajax不定时一讲的 ajax.dataSrcOption ajax.dataSrc 1不定时一讲 ajax.dataSrc 2不定时一讲控制
error	integer	可选。你可以定义一个错误来描述服务器出了问题后的友好提示

(ps:括号里面是我使用的，前面是官网说明的，对于dataTables的参数，有很多种写法，讲道理应该都可以，试试就知道了?)
响应报文例子：

官网响应报文例子：

{
    "draw": 1,
    "recordsTotal": 57,
    "recordsFiltered": 57,
    "data": [
        {
            "DT_RowId": "row_3",
            "DT_RowData": {
                "pkey": 3
            },
            "first_name": "Angelica",
            "last_name": "Ramos",
            "position": "System Architect",
            "office": "London",
            "start_date": "9th Oct 09",
            "salary": "$2,875"
        },
        {
            "DT_RowId": "row_17",
            "DT_RowData": {
                "pkey": 17
            },
            "first_name": "Ashton",
            "last_name": "Cox",
            "position": "Technical Author",
            "office": "San Francisco",
            "start_date": "12th Jan 09",
            "salary": "$4,800"
        },
        ...
    ]
}

后台处理例子：

   /**
     * 通过datatable获取司机列表
     * @param pageInfomation dataTable传递参数(这个自己根据传递的参数去封装一个对象即可)
     * @param driver 自定义搜索条件参数
     * @return
     */
    @RequestMapping(value="/driver",method = RequestMethod.POST)
    @ResponseBody
    public Map<String  ,Object>  driverDataTableList(PageInfomation pageInfomation, Driver driver){
        Map<String,Object> map = new HashMap<>();
        try {
            map = this.driverService.driverDataTableInfo(pageInfomation,driver);
        }catch (Exception e){
            e.printStackTrace();
            map.put("sEcho",pageInfomation.getsEcho());
            map.put("iTotalRecords",0);
            map.put("iTotalDisplayRecords",0);
            map.put("aaData",null);
        }
        return map;
    }

运行效果图

资源地址

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

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

本文地址：https://blog.csdn.net/qq_38403662/article/details/85211554

您可能感兴趣的文章:

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！

使用dataTable实现服务端分页

2019年01月07日 | 移动技术网IT编程 | 我要评论