文档章节

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

绝对起航
 绝对起航
发布于 2017/09/07 23:02
字数 646
阅读 15
收藏 0
点赞 0
评论 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
博文 9
码字总数 5306
作品 0
广州
dataTables相关资料参考

https://www.cnblogs.com/sweeeper/p/6106320.html http://yuemeiqing2008-163-com.iteye.com/blog/2006942...

ahl123 ⋅ 06/20 ⋅ 0

专注于API的管理后台 - ApiAdmin

站在巨人的肩膀上,并不是高的表现,反而使自己变得渺小~只有吸收了巨人的营养,茁壮自己才是真正的高大! --笔者 ApiAdmin 前端页面 ApiAdmin3.0是一个前后端完全分离的项目,前端采用Vue构...

ZHXI ⋅ 2016/11/21 ⋅ 21

基于adminlte的后台管理系统开发

前言 现在的大前端技术来势凶猛,Vue&React&Angular三足鼎立,让我们这些后端开发人员瑟瑟发抖。为了开发一个内部使用的管理系统需要去学习Node&Webpack等各种新概念,况且我们的系统并没有那...

gongxufan ⋅ 06/21 ⋅ 0

jQuery Datatables常用配置

官网:Datatables官网中文网:Datatables中文网 我用过的一些配置:

Anymore ⋅ 2016/12/07 ⋅ 0

cjbi/wetech-admin

Wetech-Admin Wetech-Admin 是基于Maven+Spring+SpringMVC+Mybatis的轻量级后台管理系统,适用于中小型项目的管理后台,支持按钮级别的权限控制,系统具有最基本的用户管理、角色管理、资源管...

cjbi ⋅ 04/20 ⋅ 0

DataTables 控件使用和心得 (2) - 参数Options中文说明

在以前的文章中说起Datatable的参数一般都是英文的,今天分享一下Datatable参数的中文说明,以及详细使用。 什么是DataTables参数(Options) 上篇我们说了,DataTables控件的加载函数dataTable...

别人说我名字很长 ⋅ 2016/05/14 ⋅ 0

DataTables 使用配置

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

谢锡鹏 ⋅ 2015/01/19 ⋅ 0

jquery/jq-ui datatable配置项说明

jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。dataTables 的网站上也提供了大量的演示和详细的文档进行说明,为了方...

孟飞阳 ⋅ 2016/11/26 ⋅ 0

jquery之DataTables的使用

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

mickelfeng ⋅ 2012/11/12 ⋅ 1

DataTables_详细使用方法

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

喵王不瞌睡 ⋅ 2015/05/02 ⋅ 1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Kubeflow实战系列:利用TFJob导出分布式TensorFlow模型

介绍 本系列将介绍如何在阿里云容器服务上运行Kubeflow, 本文介绍如何使用TfJob导出分布式模型训练模型。 第一篇:阿里云上使用JupyterHub 第二篇:阿里云上小试TFJob 第三篇:利用TFJob运行...

全部原谅 ⋅ 9分钟前 ⋅ 0

007. 深入JVM学习—老年代

老年代空间的主要目的是用于存储由Eden发送来的对象,一般在经历好几次“Minor GC”还会保存下来的对象,才会被复制到老年代,这样就可以存放更多的对象,同时在老年代中执行GC的次数也相对较...

影狼 ⋅ 10分钟前 ⋅ 0

常见的一些C#开源框架或者开源项目

原:https://blog.csdn.net/qq_27825451/article/details/70666044 Json.NET http://json.codeplex.com/ Json.Net 是一个读写Json效率比较高的.Net框架.Json.Net 使得在.Net环境下使用Json更......

whoisliang ⋅ 11分钟前 ⋅ 0

设计模式基本原理

刚开始接触编程这行的时候看过设计模式,当时感觉学这些模式没有太大的用处,当时也看不太懂。但是随着慢慢接触这一行,经过一段时间的编程以后,再回过头来看设计模式,发现设计模式的确是太...

王子城 ⋅ 14分钟前 ⋅ 0

阿里云全面支持IPv6!一文揽尽4位大咖精彩演讲

摘要: 自从去年11月以来,阿里巴巴高度重视数据中心的网络改造、云产品改造、应用及网络改造等多个维度,经过半年以来的建设,阿里云已经完成了域名解析等关键产品的分析,现在阿里云已经完...

传授知识的天使 ⋅ 25分钟前 ⋅ 0

windows Android sdk 配置

1、下载Android SDK,点击安装,直接默认路径即可! 下载地址:http://developer.android.com/sdk/index.html 2、默认路径安装后,安装完成,开始配置环境变量。 3、打开计算机属性——高级系...

阿豪boy ⋅ 28分钟前 ⋅ 0

bash shell script 简明教程

User <--> bash <--> kernel shell is not kernel or part of kernel various shells: tcsh, csh, bash, ksh find the using shell: echo $SHELL find all the shells: cat /etc/shells what......

mskk ⋅ 30分钟前 ⋅ 0

Service Mesh简史

William Morgan Service Mesh是一个相当新的概念,讲它的“历史”似乎有些勉强。就目前而言,Service Mesh已经在部分企业生产环境中运行了超过18个月,它的源头可以追溯到2010年前后互联网公...

好雨云帮 ⋅ 30分钟前 ⋅ 0

10个免费的服务器监控工具

监控你的WEB服务器或者WEB主机运行是否正常与健康是非常重要的。你要确保用户始终可以打开你的网站并且网速不慢。服务器监控工具允许你收集和分析有关你的Web服务器的数据。 有许多非常好的服...

李朝强 ⋅ 43分钟前 ⋅ 0

压缩工具之zip-tar

zip 支持目录压缩。使用yum安装zip包,使用yum安装unzip包 zip 1.txt.zip 1.txt #将1.txt文件压缩,新生成的压缩文件为1.txt.zip,原文件保留 zip -r 123.zip 123/ #-r对目录操作。将123/目录...

ZHENG-JY ⋅ 43分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部