Datatables自定义显示数量，重新加载保持在原页面而不是返回首页

       使用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);
		}
})

 

转载于:https://my.oschina.net/u/2349928/blog/1531560