Datatables自定义显示数量,重新加载保持在原页面而不是返回首页
Datatables自定义显示数量,重新加载保持在原页面而不是返回首页
绝对起航 发表于3个月前
Datatables自定义显示数量,重新加载保持在原页面而不是返回首页
  • 发表于 3个月前
  • 阅读 6
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

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

 

共有 人打赏支持
粉丝 0
博文 8
码字总数 5072
×
绝对起航
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: