文档章节

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

绝对起航
 绝对起航
发布于 2017/09/07 23:02
字数 646
阅读 83
收藏 0

       使用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
博文 10
码字总数 6155
作品 0
广州
私信 提问
DataTables_详细使用方法

jQuery的DataTables插件的使用方法 ADMIN 2011年11月23日 13:15:45 发布 在做后台的时候并没有美工和前端工程师来配合你做页面,为了显示数据并有一定的美感,我们可以使用jQuery的DataTable...

喵王不瞌睡
2015/05/02
0
1
dataTables-使用详细说明整理

本文共四部分:官网 | 基本使用|遇到的问题|属性表 一:官方网站:[http://www.datatables.NET/] 二:基本使用:[http://www.guoxk.com/node/jQuery-datatables] 1、DataTables的默认配置 $(...

ahl123
07/02
0
0
DataTables 使用配置

一:官方网站:[http://www.datatables.net/] 二:基本使用:[http://www.guoxk.com/node/jquery-datatables] 1、DataTables的默认配置 $(document).ready(function() { $('#example').dataT......

谢锡鹏
2015/01/19
0
0
jquery之DataTables的使用

强大的表格解决方案,有多强大,一起来看下吧: 1、DataTables的默认配置 $(document).ready(function() { $(‘#example’).dataTable(); } ); 示例:http://www.guoxk.com/html/DataTables/...

mickelfeng
2012/11/12
0
1
Datatables快速入门开发--一款好用的JQuery表格插件

  博主是一个java后端程序员,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jquer...

冬至饮雪
2017/08/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring源码学习笔记-1-Resource

打算补下基础,学习下Spring源码,参考书籍是《Spring源码深度解析》,使用版本是Spring 3.2.x,本来想试图用脑图记录的,发现代码部分不好贴,还是作罢,这里只大略记录下想法,不写太细了 ...

zypy333
今天
10
0
RestClientUtil和ConfigRestClientUtil区别说明

RestClientUtil directly executes the DSL defined in the code. ConfigRestClientUtil gets the DSL defined in the configuration file by the DSL name and executes it. RestClientUtil......

bboss
今天
17
0

中国龙-扬科
昨天
2
0
Linux系统设置全局的默认网络代理

更改全局配置文件/etc/profile all_proxy="all_proxy=socks://rahowviahva.ml:80/"ftp_proxy="ftp_proxy=http://rahowviahva.ml:80/"http_proxy="http_proxy=http://rahowviahva.ml:80/"......

临江仙卜算子
昨天
10
0
java框架学习日志-6(bean作用域和自动装配)

本章补充bean的作用域和自动装配 bean作用域 之前提到可以用scope来设置单例模式 <bean id="type" class="cn.dota2.tpye.Type" scope="singleton"></bean> 除此之外还有几种用法 singleton:......

白话
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部