jquery datatable服务端分页
OK,上次完成了客户端的分页,这次我们就在上一次的Demo上进行修改,来实现服务端的分页~
js代码:
<scripttype="text/javascript"> $(document).ready(function(){ $('#table_id_example').DataTable({ "bProcessing":false,//是否显示加载 "sAjaxSource":'/datatableDemo/user/json',//请求资源路径 "serverSide":true,//开启服务器处理模式 /* 使用ajax,在服务端处理数据 sSource:即是"sAjaxSource" aoData:要传递到服务端的参数 fnCallback:处理返回数据的回调函数 */ "fnServerData":function(sSource,aoData,fnCallback){ $.ajax({ 'type':'post', "url":sSource, "dataType":"json", "data":{"aodata":JSON.stringify(aoData)}, "success":function(resp){ fnCallback(resp); } }); }, "columns":[ {data:"id"}, {data:"name"}, {data:"age"}, ] }); }) </script>
开启服务器处理模式,这时我们对表格的每次操作,datatable都会帮我们向服务器发起请求获取数据,默认是用GET方式传递参数,所以我们下面加上了”fnServerData”,这样可以修改参数传递的方式为POST,那么到底给服务端发送的”aoData”是个什么鬼呢,别急,我们直接从Servlet取出来看看就知道了
此时我们的Servlet也要做一点修改:
publicclassActionextendsHttpServlet{ /** * */ privatestaticfinallongserialVersionUID=5957315496919679612L; @Override protectedvoidservice(HttpServletRequestrequest,HttpServletResponseresponse) throwsServletException,IOException{ //编码设置 request.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=UTF-8"); response.setCharacterEncoding("UTF-8"); //把传送过来的JSON字符串转成JSON数组 JSONArrayja=JSONArray.fromObject(request.getParameter("aodata")); System.out.println(ja); //从数据库获取数据 List<User>listUser=Service.getInstance().getAll(); //数据封装并返回给客户端 DataTableJSONResponsedtjs=newDataTableJSONResponse(listUser); JSONObjectjsonObject=JSONObject.fromObject(dtjs); response.getWriter().print(jsonObject.toString()); }
此时我们运行一下,OK,发现所谓的参数长这个模样
[{“name”:”sEcho”,”value”:1}, {“name”:”iColumns”,”value”:3}, {“name”:”sColumns”,”value”:”,,”}, {“name”:”iDisplayStart”,”value”:0}, {“name”:”iDisplayLength”,”value”:10}, {“name”:”mDataProp_0”,”value”:”id”}, {“name”:”sSearch_0”,”value”:”“}, {“name”:”bRegex_0”,”value”:false}, {“name”:”bSearchable_0”,”value”:true}, {“name”:”bSortable_0”,”value”:true}, {“name”:”mDataProp_1”,”value”:”name”}, {“name”:”sSearch_1”,”value”:”“}, {“name”:”bRegex_1”,”value”:false}, {“name”:”bSearchable_1”,”value”:true}, {“name”:”bSortable_1”,”value”:true}, {“name”:”mDataProp_2”,”value”:”age”}, {“name”:”sSearch_2”,”value”:”“}, {“name”:”bRegex_2”,”value”:false}, {“name”:”bSearchable_2”,”value”:true}, {“name”:”bSortable_2”,”value”:true}, {“name”:”sSearch”,”value”:”“}, {“name”:”bRegex”,”value”:false}, {“name”:”iSortCol_0”,”value”:0}, {“name”:”sSortDir_0”,”value”:”asc”}, {“name”:”iSortingCols”,”value”:1}]
是不是感觉有点晦涩难懂,于是本菜上网查了下,勉强是看懂这个鬼东西,接下来就讲解一下几个我们需要的参数:
sEcho:客户端发送请求同时发送过来的一个标识,虽然有什么卵用不知道,不过我们服务端返回的数据中必须带有这个标识,哦,官网的文档里说,服务端取出标识最好转一下转成int,防止XXS攻击(懵逼,暂且不管,我们只知道需要这个就行)
iColumns:列数
iDisplayStart:起始索引
iDisplayLength:显示的行数
{“name”:”mDataProp_0”,”value”:”id”},
{“name”:”sSearch_0”,”value”:”“},
{“name”:”bRegex_0”,”value”:false},
{“name”:”bSearchable_0”,”value”:true},
{“name”:”bSortable_0”,”value”:true}
每一列的参数设置,_0即是第一列,这个我们不管,到下面也是提取列名而已
sSearch:全局搜索字段
iSortCol_0:被排序的列
sSortDir_0:排序方式
完成了参数解读,那么接下来就要提取我们的参数啦~~开工加代码
publicclassActionextendsHttpServlet{ /** * */ privatestaticfinallongserialVersionUID=5957315496919679612L; @Override protectedvoidservice(HttpServletRequestrequest,HttpServletResponseresponse) throwsServletException,IOException{ //编码设置 request.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=UTF-8"); response.setCharacterEncoding("UTF-8"); //把传送过来的JSON字符串转成JSON数组 JSONArrayja=JSONArray.fromObject(request.getParameter("aodata")); System.out.println(ja); //获取需要的参数值 StringsEcho=null; IntegeriColumns=null; IntegeriDisplayStart=null; IntegeriDisplayLength=null; List<String>mDataProp=newArrayList<String>();//存放列名 StringsSearch=null; IntegeriSortCol_0=null; StringiSortCol=null; StringsSortDir_0=null; for(inti=0;i<ja.size();i++){ if(ja.getJSONObject(i).getString("name").equals("sEcho")) sEcho=ja.getJSONObject(i).getString("value"); elseif(ja.getJSONObject(i).getString("name").equals("iColumns")) iColumns=Integer.valueOf(ja.getJSONObject(i).getString("value")); elseif(ja.getJSONObject(i).getString("name").equals("iDisplayStart")) iDisplayStart=Integer.valueOf(ja.getJSONObject(i).getString("value")); elseif(ja.getJSONObject(i).getString("name").equals("iDisplayLength")) iDisplayLength=Integer.valueOf(ja.getJSONObject(i).getString("value")); elseif(ja.getJSONObject(i).getString("name").equals("sSearch")) sSearch=ja.getJSONObject(i).getString("value"); elseif(ja.getJSONObject(i).getString("name").equals("iSortCol_0")) iSortCol_0=Integer.valueOf(ja.getJSONObject(i).getString("value")); elseif(ja.getJSONObject(i).getString("name").equals("sSortDir_0")) sSortDir_0=ja.getJSONObject(i).getString("value"); elseif(iColumns!=null){ for(intj=0;j<iColumns;j++) if(ja.getJSONObject(i).getString("name").equals("mDataProp_"+j)) mDataProp.add(ja.getJSONObject(i).getString("value")); } } iSortCol=mDataProp.get(iSortCol_0); System.out.println(sEcho); System.out.println(iColumns); System.out.println(iDisplayStart); System.out.println(iDisplayLength); System.out.println(sSearch); System.out.println(iSortCol); System.out.println(sSortDir_0); //从数据库获取数据 List<User>listUser=Service.getInstance().getAll(); //数据封装并返回给客户端 DataTableJSONResponsedtjs=newDataTableJSONResponse(listUser); JSONObjectjsonObject=JSONObject.fromObject(dtjs); response.getWriter().print(jsonObject.toString()); }
好的,加工完毕,这时我们跑一跑看看是不是打出我们要的参数,这里我就不贴出来了,你们自己跑了看,好的发现拿到了我们要的参数,那么接下来可以拼接我们的sql语句了,同时我们要对我们的DataTableJSONResponse进行一下小小的修改,因为这里对于返回的数据也是有参数要求的,那我们就把需要的参数放进去,代码如下:
publicclassDataTableJSONResponse{ ObjectsEcho; ObjectiTotalRecords;//查询的记录数 ObjectiTotalDisplayRecords;//过滤后的记录数 ObjectaaData; publicDataTableJSONResponse(){ super(); } publicDataTableJSONResponse(ObjectaaData){ super(); this.aaData=aaData; } publicDataTableJSONResponse(ObjectsEcho,ObjectiTotalRecords,ObjectiTotalDisplayRecords,ObjectaaData){ super(); this.sEcho=sEcho; this.iTotalRecords=iTotalRecords; this.iTotalDisplayRecords=iTotalDisplayRecords; this.aaData=aaData; } publicObjectgetAaData(){ returnaaData; } publicvoidsetAaData(ObjectaaData){ this.aaData=aaData; } publicObjectgetsEcho(){ returnsEcho; } publicvoidsetsEcho(ObjectsEcho){ this.sEcho=sEcho; } publicObjectgetiTotalRecords(){ returniTotalRecords; } publicvoidsetiTotalRecords(ObjectiTotalRecords){ this.iTotalRecords=iTotalRecords; } publicObjectgetiTotalDisplayRecords(){ returniTotalDisplayRecords; } publicvoidsetiTotalDisplayRecords(ObjectiTotalDisplayRecords){ this.iTotalDisplayRecords=iTotalDisplayRecords; } }
完整的Servlet:
publicclassActionextendsHttpServlet{ /** * */ privatestaticfinallongserialVersionUID=5957315496919679612L; @Override protectedvoidservice(HttpServletRequestrequest,HttpServletResponseresponse) throwsServletException,IOException{ //编码设置 request.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=UTF-8"); response.setCharacterEncoding("UTF-8"); //把传送过来的JSON字符串转成JSON数组 JSONArrayja=JSONArray.fromObject(request.getParameter("aodata")); //获取需要的参数值 StringsEcho=null; IntegeriColumns=null; IntegeriDisplayStart=null; IntegeriDisplayLength=null; List<String>mDataProp=newArrayList<String>();//存放列名 StringsSearch=null; IntegeriSortCol_0=null; StringiSortCol=null; StringsSortDir_0=null; for(inti=0;i<ja.size();i++){ if(ja.getJSONObject(i).getString("name").equals("sEcho")) sEcho=ja.getJSONObject(i).getString("value"); elseif(ja.getJSONObject(i).getString("name").equals("iColumns")) iColumns=Integer.valueOf(ja.getJSONObject(i).getString("value")); elseif(ja.getJSONObject(i).getString("name").equals("iDisplayStart")) iDisplayStart=Integer.valueOf(ja.getJSONObject(i).getString("value")); elseif(ja.getJSONObject(i).getString("name").equals("iDisplayLength")) iDisplayLength=Integer.valueOf(ja.getJSONObject(i).getString("value")); elseif(ja.getJSONObject(i).getString("name").equals("sSearch")) sSearch=ja.getJSONObject(i).getString("value"); elseif(ja.getJSONObject(i).getString("name").equals("iSortCol_0")) iSortCol_0=Integer.valueOf(ja.getJSONObject(i).getString("value")); elseif(ja.getJSONObject(i).getString("name").equals("sSortDir_0")) sSortDir_0=ja.getJSONObject(i).getString("value"); elseif(iColumns!=null){ for(intj=0;j<iColumns;j++) if(ja.getJSONObject(i).getString("name").equals("mDataProp_"+j)) mDataProp.add(ja.getJSONObject(i).getString("value")); } } iSortCol=mDataProp.get(iSortCol_0); Stringsql=null; if(sSearch.equals("")) sql="select*from(selectid,name,age,rownumrnfromdtdemo_xxx)" +"wherernbetween"+iDisplayStart+"and"+(iDisplayStart+iDisplayLength) +"orderby"+iSortCol+""+sSortDir_0; else sql="select*from(selectid,name,to_char(age,999)age,rownumrnfromdtdemo_xxxwhereidlike'%" +sSearch+"%'ornamelike'%"+sSearch+"%'oragelike'%"+sSearch+"%')" +"wherernbetween"+iDisplayStart+"and"+(iDisplayStart+iDisplayLength) +"orderby"+iSortCol+""+sSortDir_0; System.out.println(sql); //从数据库获取数据 List<User>listUser=Service.getInstance().getAll(sql); //获取记录数 intsize=Service.getInstance().getAll().size(); //数据封装并返回给客户端 DataTableJSONResponsedtjs=newDataTableJSONResponse(sEcho,size,size,listUser); JSONObjectjsonObject=JSONObject.fromObject(dtjs); response.getWriter().print(jsonObject.toString()); } }
至此,服务端分页完成~
精彩专题分享:jquery分页功能操作JavaScript分页功能操作
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。