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

朴灿烈づ我的快乐病毒、 2024-04-17 14:17 61阅读 0赞

**1、依赖的插件和包文件**

<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、前端页面：**

**3、js部分**

**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、页面效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3MV9jc2Ru_size_16_color_FFFFFF_t_70][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3MV9jc2Ru_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/b8a329e49616440c8f2ef3e878265962.png