使用datatable后台分页

        Datatable是jQuery提供的优秀的前端处理表格与分页的一个框架。接下来就通过简单的例子,说说datable的集成过程。刚一开始,百度datatable插件,搜到的大都是一些前台分页的例子,看了几个例子之后,自己尝试了一下,没出什么问题。关于前台分页没什么难的。
1.在jsp中需要定义一个< thead> 与< tbody>标签,datatable应该会扫描这个标签。
2.引入datatable,css,与js包,这个官网就可以下不用。




引入这几个东西。
 

直接调用datatable方法,都适用默认参数,这时候前台页面其实就已经分页成功了。
但是这样的分页其实没有什么意义,这属于一次性到数据库把数据都取出来,没有做到真正的分页。接下来重点说说服务器分页。最后还是google才查到解决问题的。
直接粘代码了

    

$('#example11').dataTable({   "bFilter": false,//去掉搜索框      //"bAutoWidth": true, //自适应宽度      "sPaginationType" : "full_numbers",      "bDestroy" : true,      "bProcessing" : true,      "bServerSide" : true,  "sAjaxDataProp" : "aData",//是服务器分页的标志,必须有   "sAjaxSource" : "${pageContext.request.contextPath}/datatable/datainfo",//通过ajax实现分页的url路径。    "aoColumns" : [ {       "mDataProp" : "id",   }, {       "mDataProp" : "name",   }, {       "mDataProp" : "telephone",   }, {       "mDataProp" : "email",   },  ],   // 如果不知是简单的数据显示,需要复杂的要求时,通过以下方法来实现动态js插入。   //不知道有没有更好的方法。   "aoColumnDefs":[{"aTargets":[1],"mRender":function(){       return "1441"}      }],   "bAutoWidth": true, //自适应宽度   "sPaginationType" : "full_numbers",   "oLanguage" : {       "sProcessing" : "正在加载中......",       "sLengthMenu" : "每页显示 _MENU_ 条记录",       "sZeroRecords" : "正在加载中......",       "sEmptyTable" : "表中无数据存在!",       "sInfo" : "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录",       "sInfoEmpty" : "显示0到0条记录",       "sInfoFiltered" : "数据表中共为 _MAX_ 条记录",       "sSearch" : "搜索",       "oPaginate" : {           "sFirst" : "首页",           "sPrevious" : "上一页",           "sNext" : "下一页",           "sLast" : "末页"       }   } }); });

    之后在,表格中,tbody就可以空着了,已经通过aoColumns动态注入进去了。

接下来是后台,涉及到json的地方也很麻烦

@ResponseBody
 @RequestMapping("datainfo")
 public Map datainfo(HttpServletRequest request,Model model,HttpServletResponse response) throws IOException{
 JSONObject jsonobj =new JSONObject();
 jsonobj.put("aData", DatatableDao.userList);
 Map map = new HashMap();
 map.put("sEcho", request.getParameter("sEcho"));
 map.put("iTotalRecords", 30);
 map.put("iTotalDisplayRecords", 30);
 map.put("aData", DatatableDao.userList);
 model.addAttribute("aData",DatatableDao.userList);
 System.out.println(jsonobj.toJSONString());
 return map;
 }

      SpringMVC返回json配置步骤如下:
      1、添加jackson.jar包
      2、在applicationContext.xml配制文件中添加如下代码
   


   
  
   
    
   
  
 
 
  
   
    text/html;charset=UTF-8
   
  
  


springmvc默认是不支持map类型转换成json的,必须加上上面的配置,注意还要倒入jar包(新版的springmvc集成了json,这步可以省略)

 com.fasterxml.jackson.core
 jackson-core
 2.7.1
 
 
 junit
 junit
 3.8.1
 test
 
 
 com.fasterxml.jackson.core
 jackson-databind
 2.7.1-1
 
 
 com.fasterxml.jackson.core
 jackson-annotations
 2.7.1
 
 
 org.json
 json
 20151123
 
 
 com.alibaba
 fastjson
 1.2.7


这地方先贴出一部分,可能还有没涉及到的依赖,到百度一查就好了,

你可能感兴趣的:(使用datatable后台分页)