文档章节

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

绝对起航
 绝对起航
发布于 2017/09/07 23:02
字数 646
阅读 41
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

Spark Load Data and Export Data

Load_Data_Command 一、导入数据-加载csv文件数据作为spark 临时表DataSource(不需要提前创建表,方便数据分析) 该命令将csv文件导入到临时表中,命令格式为 load data '文件路径' table [...

Avner
26分钟前
2
0
CDH5.13离线安装Spark2.3详细步骤

简介: 在我的CDH5.13集群中,默认安装的spark是1.6版本,这里需要将其升级为spark2.x版本。经查阅官方文档,发现spark1.6和2.x是可以并行安装的,也就是说可以不用删除默认的1.6版本,可以直...

hblt-j
29分钟前
2
0
Add XSS protection headers on Nginx

Add XSS protection headers on Nginx Add the following line in the http or server part of your Nginx configuration : ... # XSS Protection add_header X-Frame-Opt......

idoz
30分钟前
1
0
cmake windows 配置xp toolset

MPRO
36分钟前
2
0
day125-20181023-英语流利阅读-待学习

外卖员不要哭,打零工不容易 雪梨 2018-10-23 1.今日导读 上期我们讲到,有人认为:“零工经济”虽然没有占领全世界,但它剥夺了劳动者的合法权利,加剧了工作的不稳定性,那么“零工经济”是...

飞鱼说编程
48分钟前
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部