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分页功能操作
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。