使用Datatables时,开启后台分页后,其原有的很多功能都无法使用,比如修每页显示数量。使用datatables自带的MenuLength是很好的功能,但是使用后台分页后,这个功能就毫无用武之地。然而,我们可以自己写一个select来完成这一项功能。
<select id="ssize">
<option value="10">10条/页</option>
<option value="15">15条/页</option>
<option value="20">20条/页</option>
<option value="30">30条/页</option>
</select>
同时,我也推荐在页面中放一个隐藏的input,存放当前页码,以备不时之需。
<!-- datatables首页标记为0 -->
<input type="hidden" id="pageNo" value="0">
同时,也需要后台有后台的配合。这里以JFinal举例,springmvc参考一下就好。而这里datatables后台分页采用ajax(具体参考我上一篇博文的第二种方法),把start的值改为当前页码*用户选着条数即可。
"ajax":{
"url": "#(ctx)/admin/getHouseInfo",
"type":"post",
"data": function ( d ) {
//添加额外的参数传给服务器
d.search = $('#search').val();
d.size = $("#ssize").val();
d.start = $("#pageNo").val()*$("#ssize").val();//当前页面*用户选择条数
return {"aoData":JSON.stringify(d)};
}
}
public static Map<String, Object> getPageNoAjax(String json){
JSONObject jobject = JSONObject.parseObject(json);
map.put("iDisplayStart", Integer.parseInt(jobject.getString("start")));
System.out.println("start:"+jobject.getString("start"));
map.put("search", jobject.getString("search"));
map.put("size", jobject.getInteger("size"));
return map;
}
public void getHouseInfo(){
Map<String, Object> map = DataTableUtil.getPageNoAjax(getPara("aoData"));
Integer size = (Integer)map.get("size");
Page<Record> list = houseService.pageHouse((Integer)map.get("iDisplayStart")/size+1, size,map.get("search").toString());
renderJson(DataTableUtil.dataTypeAjax(list));
}
而获取当前页的信息只需监听切换页即可。而datatables提供了这一方法。在$().DataTable()后加上.on('page.dt')即可。代码如下:
.on( 'page.dt', function () {
$("#pageNo").val(datatable.page.info().page);
})
最后,给select加上onchange方法即可。
$("#ssize").on('change',function(){
$("#pageNo").val(0);//清除旧的页面信息
datatable.ajax.reload();
datatable.page.len($("#ssize").val()).draw();
});
最后的最后,介绍一个小技巧。使用datatables时,有可能都某一行信息进行而外操作。比如修改。如果是跳转页面的完成的,并在新页面完成操作后返回原来的table,并保持所在页数,最好不要连接到table的页面,直接使用javascript:history.go(-1); location.reload(); 返回旧页面即可。应为这样可以保存用户原来的选项,而datatables则会自动请求新的数据。但是,要进行一个小操作,那就是告诉datatables原来用户是在哪一页进行的操作,让datatables请求哪一页的数据(需完成上面所以所以操作)即可。
.on( 'init.dt', function () {
if($("#pageNo").val()!=0){//不是第一页执行翻页操作
var pageNo = $("#pageNo").val();
datatable.page(Number(pageNo)).draw(false);
}
})