jQuery中实现，datatable后台数据获取与前端分页展示

1、依赖的插件和包文件

<!-- datatable插件引入的库文件 -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"/>
    <script type="text/javascript" src="jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>

2、前端页面：

<table id="table_id"
                            class="display table table-striped table-advance table-hover table-bordered">
                            <thead>
                                <tr class="unreada">
                                    <th>项目名称</th>
                                    <th>任务描述</th>
                                    <th>创建人</th>
                                    <th>操作</th>
                                    <th>报告</th>
                                </tr>
                            </thead>
 </table>

3、js部分

function showPlan(planId) {
            var oTable = $('#table_id').DataTable(
                            {
                                "sDom" : "<'row'<'col-md-6 col-sm-12'l><'col-md-12 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", //default layout without horizontal scroll(remove this setting to enable horizontal scroll for the table)
                                               "aLengthMenu": [
                                                    [10, 25, 50, 100, -1], // value for ajax
                                                    [10, 25, 50, 100, "All"] // name show on page
                                                ], // 单页显示行数的下拉列表
                                "bDestroy" : true,
                                "bProcessing" : true, // 打开处理中标签
                                "bServerSide" : true, // 打开ajax方式获取数据
                                "sAjaxSource" : "/plan/selectPlanCaseInfoByPlanId?planId="+ planId,//展示所有接口数据
                                "fnServerData" : function(sSource,aDataSet,fnCallback){//获取服务端返回数据，aDataSet根据分页展示数据
                                        sSource = "/plan/selectPlanCaseInfoByPlanId?planId="+ planId;
                                        $.ajax( {     
                                                    type: "POST",      
                                                    //contentType: "application/json",   //这段代码不要加，我时延的是否后台会接受不到数据  
                                                    url: sSource,   
                                                    dataType:"json",  
                                                    data:{"aodata":JSON.stringify(aDataSet)}, //以json格式传递(struts2后台还是以string类型接受),year和month直接作为参数传递。  
                                                    success: function(data) {   
                                                        fnCallback(data); //服务器端返回的对象的returnObject部分是要求的格式     add dyj 要请求时必须加，否则一直是“请稍候”
                                                    }     
                                                });  
                                            }, 
                                // set the initial value
                                "iDisplayLength" : 10, // 单页行数的初始值
                                "bAutoWidth" : false, //自适应宽度 
                                //                // oLangeuage 是各个地方的显示形式
                                "oLanguage" : {
                                    "sProcessing" : '<i class="fa fa-coffee"></i>&nbsp;请稍候...',
                                    "sLengthMenu" : "每页显示_MENU_ 条",
                                    "sInfo" : "显示 _START_ 至 _END_ 条 &nbsp;&nbsp;共 _TOTAL_ 条",
                                    "oPaginate" : {
                                        "sPrevious" : "上一页",
                                        "sNext" : "下一页"
                                    },
                                    "sSearch" : "搜索:_INPUT_ "
                                },
                                "aoColumnDefs" : [ {
                                    'bSortable' : true,
                                    'aTargets' : [ 0, 1, 2, 3, 4 ],
                                } ],   
                                "aoColumns" : [ {
                                    "sWidth" : "15%"
                                }, {
                                    "sWidth" : "15%"
                                }, {
                                    "sWidth" : "20%"
                                }, {
                                    "sWidth" : "30%"
                                }, {
                                    "sWidth" : "20%"
                                },
                                ],
                            });
        };

4、controller数据获取

@RequestMapping(value="/selectPlanCaseInfoByPlanId",method=RequestMethod.POST)
    public JSONObject selectPlanCaseController(@RequestParam(value="planId",required=false) int planId,HttpServletRequest request){
        List<FusePlanCaseEntity> fusePlanCaseEntities=new ArrayList<FusePlanCaseEntity>();
        JSONObject jsonObject=new JSONObject();
        try {
            String sEcho=request.getParameter("sEcho");//DataTables 用来生成的信息
            System.out.println("**********************"+sEcho);
            String[] array=null;
            ArrayList<String[]> arrays=new ArrayList<String[]>();
            String sSearch="";//全局搜索字段
            String iDisplayStart="";//用于指定从哪一条数据开始显示到表格中去
            String iDisplayLength="";//用于指定一屏显示的条数，需开启分页器
            // 把传送过来的JSON字符串转成JSON数组
            String aodata = request.getParameter("aodata");
            JSONArray jsonArray=JSON.parseArray(aodata);
            if (jsonArray!=null) {
                for(int i=0;i<jsonArray.size();i++){
                    if(jsonArray.getJSONObject(i).getString("name").equals("sEcho")){
                        sEcho = jsonArray.getJSONObject(i).getString("value");
                    }else if(jsonArray.getJSONObject(i).getString("name").equals("iDisplayStart")){
                        iDisplayStart = jsonArray.getJSONObject(i).getString("value");
                    }else if(jsonArray.getJSONObject(i).getString("name").equals("iDisplayLength")){
                        iDisplayLength = jsonArray.getJSONObject(i).getString("value");
                    }else if(jsonArray.getJSONObject(i).getString("name").equals("sSearch")){
                        sSearch = jsonArray.getJSONObject(i).getString("value");
                    }
                }
            }
            fusePlanCaseEntities=planInter.selectPlanCaseInfoByPlanId(planId,sSearch);//获取用例返回结果集
            int i=0;
            for(FusePlanCaseEntity fusePlanCaseEntity:fusePlanCaseEntities) {
                array=new String[8];
                array[0] = fusePlanCaseEntity.getProjectName();
                array[1] = fusePlanCaseEntity.getPlanCaseDec();
                array[2] = fusePlanCaseEntity.getCreater();
                array[3] =   "<i  class='fa fa-toggle-right fa-lg' title='执行' οnmοuseοver=bigMsg(this) οnmοuseοut=smallMsg(this) οnclick=runPlanCase('"+fusePlanCaseEntity.getPlanId()+"_"+fusePlanCaseEntity.getId()+"|"+fusePlanCaseEntity.getPlanCase()+"')></i>&nbsp"
                           + "<i  class='fa fa-trash-o fa-lg' title='删除' οnmοuseοver=bigMsg(this) οnmοuseοut=smallMsg(this) οnclick=deletePlanCase('"+fusePlanCaseEntity.getId()+"') ></i>&nbsp"
                           + "<i  class='fa fa-pencil fa-lg' title='编辑' οnmοuseοver=bigMsg(this) οnmοuseοut=smallMsg(this) οnclick=updateFusePlanTask('"+fusePlanCaseEntity.getId()+"') ></i>";
                array[4] = "<button class=\"btn green\" οnclick=showReport('"+fusePlanCaseEntity.getPlanId()+"|"+fusePlanCaseEntity.getId()+"')>报告</button>";
                arrays.add(array);
                i++;
            }
            jsonObject.put("sEcho", sEcho);
            jsonObject.put("iTotalRecords", i);
            jsonObject.put("iTotalDisplayRecords", i);
            if (Integer.parseInt(iDisplayStart)+Integer.parseInt(iDisplayLength)>0) {
                jsonObject.put("aaData", arrays.subList(Integer.parseInt(iDisplayStart), Integer.parseInt(iDisplayStart)+(i-Integer.parseInt(iDisplayStart))));
            }else {
                jsonObject.put("aaData", arrays.subList(Integer.parseInt(iDisplayStart), Integer.parseInt(iDisplayStart)+Integer.parseInt(iDisplayLength)));
            }
        } catch(Exception e) {
            e.printStackTrace();
        }    
        System.out.println("----------------------"+jsonObject);
        return jsonObject;
    }

5、页面效果：

备注：以上数据获取过程中涉及业务接口类、业务实现类、DAO、mapper映射已省去；重点讲述datatable数据填充。另外，时间限制这里没有实现图中搜索功能。