OK,上次完成了客户端的分页,这次我们就在上一次的Demo上进行修改,来实现服务端的分页~
js代码:
<script type="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也要做一点修改:
public class Action extends HttpServlet { /**
*
*/
private static final long serialVersionUID = 5957315496919679612L;
@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 编码设置
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=UTF-8");
response.setCharacterEncoding("UTF-8");
// 把传送过来的JSON字符串转成JSON数组
JSONArray ja = JSONArray.fromObject(request.getParameter("aodata"));
System.out.println(ja);
// 从数据库获取数据
List<User> listUser = Service.getInstance().getAll();
// 数据封装并返回给客户端
DataTableJSONResponse dtjs = new DataTableJSONResponse(listUser);
JSONObject jsonObject = 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”:”“},










