文档章节

Datatables 汉化 后台分页(2种方式+JFinal与SpringMvc后台)

绝对起航
 绝对起航
发布于 2017/08/15 17:23
字数 1908
阅读 62
收藏 0
点赞 0
评论 1

       Datatables是一款很便捷,功能很强大的前端分页插件。但是,在实际应用中,表格通常数据量会非常庞大,所以不提倡把数据一次性加载到页面。所以,datatables使用后台分页是一个不错的选择。但是,使用后台分页就要放弃datatables自带的3个功能:排序,分页条数选项,内容搜索。因为采用后端分页后,这三项内容都必须由后端完成(目前因为本人能力有限,只完成了分页和内容搜索,排序网上也有其他人做过,有心人不妨试成功了跟我说一下)。

       本人用过amazeui的datatables插件,也使用过原生datatables及其提供的bootstrap风格。两者其实一样。只是amazeui的datatables帮你汉化完和引入了amazeui的table风格。这里不再详述要引用的css和js,具体可以百度。

       首先讲讲如何使用datatables的汉化。

$('#dimtable').DataTable({
	    "searching" : false,//关闭自带搜索
		"bLengthChange" : false,//关闭自带分页选项
		"ordering" : false,//关闭排序
		"serverSide" : true,//这个用来指明是通过服务端来取数据
		"processing" : true, //打开数据加载时的等待效果  
		"oLanguage" : {
			"sLengthMenu" : "每页显示 _Menu_条记录",
			"sInfo" : "当前显示_START_到_END_条,共_TOTAL_条记录",
			"sInfoEmpty" : "显示第 0 至 0 项结果,共 0 项",
			"sZeroRecords" : "对不起,查询不到相关的数据",
			"sInfoFiltered" : "",//"(从 _MAX_ 条记录过滤)"此项为显示过滤信息
			"oPaginate" : {
				"sFirst" : "首页",
				"sPrevious" : "上一页",
				"sNext" : "下一页",
				"sLast" : "尾页"
			},
			"sSearch" : "查找"},
		});
});

       你需要定义一个table,及其表头。同时,可以通过控制th的宽度控制表格宽度。接下来,我们通过id给这个table绑定datatables。

<table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black" id="list">
	<thead>
		<tr>
		  <th style="display:none">ID</th>
		  <th style="width:50%">地址</th>
		  <th style="width:20%">坐标</th>
		  <th style="width:30%">操作</th>
		</tr>
	</thead>
	<tbody>
	<!-- more data -->
	</tbody>
</table>

       接下来,我们开始第一种后台分页的方法。这种方法目前暂不支持自定义刷新,仅点击分页信息时会向后台请求数据。具体实现如下代码。

var datatable
$(function(){ 
	datatable=$('#list').DataTable({
		"searching": false,
		"bLengthChange": false,
		"ordering": false,
		"serverSide": true,//这个用来指明是通过服务端来取数据
        "sAjaxSource": "#(ctx)/admin/getHouseInfo",//这个是请求的地址
        "fnServerData": retrieveData, // 获取数据的处理函数
        "columns" : [ //处理行数据,这里的data数量必须与<th>的数量一致,否则报错。同时,function中的data包含整行数据信息
        	 { data : "id","visible" : false }, 
        	 { data : function(data, type, full){
        		 return data.province+data.city+data.county+data.address;
        	 }}, 
        	 { data :  function(data, type, full){
        		 return "("+data.ax+","+data.ay+")";
        	 }}, 
        	 {
        	   data :  function(data, type, full){
        		 return "<div class=\"tpl-table-black-operation\">"+
                 "<a href=\"javascript:;\"><i class=\"am-icon-pencil\"></i> 修改</a>"+
                 "<a href=\"javascript:;\"><i class=\"am-icon-pencil\"></i> 管理</a>"+
                 "<a href=\"javascript:;\" class=\"tpl-table-black-operation-del\"><i class=\"am-icon-trash\"></i> 删除</a></div>";
        	 }}
        	 ]
	}); 
});

function retrieveData(sSource,aoData, fnCallback) {
        $.ajax({
        url : sSource,//这个就是请求地址对应sAjaxSource
        data : {"aoData":JSON.stringify(aoData)},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数
        type : 'post',
        dataType : 'json',
        async : false,
        success : function(result) {
            fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
        },
        error : function(msg) {
             //报错执行方法
        }
    });
} 

       此时后台接收到的请求JSON信息为:

aoData=[{"name":"sEcho","value":1},
{"name":"iColumns","value":4},
{"name":"sColumns","value":",,,"},
{"name":"iDisplayStart","value":0},
{"name":"iDisplayLength","value":10},
{"name":"mDataProp_0","value":"id"},
{"name":"mDataProp_1","value":"name"},
{"name":"mDataProp_2","value":"disname"},
{"name":"mDataProp_3","value":"function"}]

       其中,有用的信息为sEcho(不知道为什么,就是有用),iDisplayStart:请求数据的初始位,IDisplayLength为每页行数。本人默认使用10行分页,有需要的人可以自行提取次数据。本人后台方法(JFinal)如下,SpringMvc差不多,参考一下就行:

public void getHouseInfo(){
	Map<String, Integer> map = DataTableUtil.getPageNo(getPara("aoData"));
	Page<House> list = houseService.pageHouse(map.get("iDisplayStart")/10+1, 10);//因为datatables请求后台只提供请求初始位置信息(如10个分页,那第一页请求信息为0,第二页为10,第三页为20)。这个方法是JFinal的分页方法,第一个参数为页数,第二个参数为每页行数。若不按10条分页,请提取IDisplayLength参数,替换数据10。
	renderJson(DataTableUtil.dataType(list, map.get("sEcho")));
}

private static Map<String, Integer> map = new HashMap<>();
private static JSONObject getObj = new JSONObject();

//提取JSON数据中有用的信息
public static Map<String, Integer> getPageNo(String json){
	JSONArray jsonarray = JSONArray.parseArray(json); 
	for (int i = 0; i < jsonarray.size(); i++) {
	JSONObject obj = (JSONObject) jsonarray.get(i);
	if (obj.get("name").equals("sEcho"))
	     map.put("sEcho", Integer.parseInt(obj.getString("value")));
	if (obj.get("name").equals("iDisplayStart"))
	     map.put("iDisplayStart", Integer.parseInt(obj.getString("value")));
	}
    return map;
}

//回传数据信息,需按照datatables的数据格式返回信息
public static <E> String dataType(Page<E> page,Integer pageNum){
	List<E> list = page.getList();
	getObj.put("sEcho", pageNum);// 不知道这个值有什么用,有知道的请告知一下
	getObj.put("iTotalRecords", list.size());//每页行数
	getObj.put("iTotalDisplayRecords",page.getTotalRow());//分页的总行数
    getObj.put("aaData", list);//分页信息
    return getObj.toString();
}

       接下来我们说第二种分页方法,这种分页方法比较好用,支持随意向后台传递自定义数据,并支持手动刷新datatables。代码如下:

var datatable
$(function(){ 
	datatable=$('#list').DataTable({
		"searching": false,
		"bLengthChange": false,
		"ordering": false,
		"serverSide": true,//这个用来指明是通过服务端来取数据
		"processing": true, //打开数据加载时的等待效果  
        "ajax":{
        	"url": "#(ctx)/admin/getHouseInfo",   
            "type":"post",
            "data": function ( d ) {  
                var level1 = $('#search').val();  //此处为外部搜索框信息
                //添加额外的参数传给服务器  
                d.extra_search = level1;  
                return {"aoData":JSON.stringify(d)};
            }  
        },
        "columns" : [ 
        	 { data : "id","visible" : false }, 
        	 { data : function(data, type, full){
        		 return data.province+data.city+data.county+data.address;
        	 }}, 
        	 { data :  function(data, type, full){
        		 return "("+data.ax+","+data.ay+")";
        	 }}, 
        	 {
        	   data :  function(data, type, full){
        		 return "<div class=\"tpl-table-black-operation\">"+
                 "<a href=\"javascript:;\"><i class=\"am-icon-pencil\"></i> 修改</a>"+
                 "<a href=\"javascript:;\"><i class=\"am-icon-pencil\"></i> 管理</a>"+
                 "<a href=\"javascript:;\" class=\"tpl-table-black-operation-del\"><i class=\"am-icon-trash\"></i> 删除</a></div>";
        	 }}
        	 ]
	}); 
});
//搜索框的搜索按钮点击事件。其它地方想刷新datatables直接使用里面的方法就好。
$("#searchBtn").on('click',function(){
	datatable.ajax.reload();
});

       此时,后台接收到的JSON信息与第一个方法完全不一样:

aoData={"draw":1,
"columns":[{"data":"id","name":"","searchable":true,"orderable":false,"search"{"value":"","regex":false}},{"data":"function","name":"","searchable":true,"orderable":false,"search":{"value":"","regex":false}},{"data":"function","name":"","searchable":true,"orderable":false,"search":{"value":"","regex":false}},{"data":"function","name":"","searchable":true,"orderable":false,"search":{"value":"","regex":false}}],
"order":[],
"start":0,
"length":10,
"search":{"value":"","regex":false},
extra_search":""}

       可以看到有用信息为start(初始位置),length(每页长度),extra_search(额外传送参数)。

       所以,本人的JFinal后台如下写:

public void getHouseInfo(){
	Map<String, Integer> map = DataTableUtil.getPageNoAjax(getPara("aoData"));
	Page<House> list = houseService.pageHouse(map.get("iDisplayStart")/10+1, 10);
    renderJson(DataTableUtil.dataTypeAjax(list));
}


private static Map<String, Integer> map = new HashMap<>();
private static JSONObject getObj = new JSONObject();

//目前我是按照10行分页,有需要的按照其他行数分页的请提取参数length
public static Map<String, Integer> getPageNoAjax(String json){
	JSONObject jobject = JSONObject.parseObject(json);
    map.put("iDisplayStart", Integer.parseInt(jobject.getString("start")));
	return map;
}

//返回数据,与第一种返回数据格式不一样
public static <E> String dataTypeAjax(Page<E> page){
	List<E> list = page.getList();
	getObj.put("iTotalRecords", list.size());//每页的行数
	getObj.put("iTotalDisplayRecords",page.getTotalRow());//分页总行数
	getObj.put("aaData", list);//分页内容信息
	return getObj.toString();
}

       本人写的SpringMvc后台如下:

@RequestMapping("getHouseInfo")
@ResponseBody
public DataTableViewPage<House> getPageList(String aoData) {
	Map<String, Object> param = houseservice.getExtraParam(aoData);//获取相关参数
	String search = (String) param.get("extra_search");//获取搜索框参数
	Pageable pageable = houseservice.getPageable(aoData);//获取分页信息
	Page<House> housepage = null;
	if (search.isEmpty())
		housepage = houseservice.getAllHouse(pid,pageable);
	else 
		housepage = houseservice.getHouseBySearch(search, pageable);
	return new DataTableViewPage<House>((int) housepage.getTotalElements(), housepage.getSize(), housepage.getContent());
}

//获取参数
@Override
public Map<String, Object> getExtraParam(String json) {
	Map<String, Object> map = new HashMap<String, Object>();
	JSONObject jo = JSONObject.parseObject(json);
	map.put("extra_search", jo.getString("extra_search"));
	return map;
}

//获取分页信息
@Override
public Pageable getPageable(String json) {
	JSONObject jo = JSONObject.parseObject(json);
	int pageNo = jo.getIntValue("start") / 10;
	Pageable pageable = new PageRequest(pageNo, 10);
	return pageable;
}

//返回数据类型DataTableViewPage
public class DataTableViewPage<T> {
	
	private List<T> aaData;
	private Integer iTotalDisplayRecords;   
    private Integer iTotalRecords;  
    
    public DataTableViewPage(Integer iTotalDisplayRecords,Integer iTotalRecords,List<T> aaData){
    	this.aaData = aaData;
    	this.iTotalDisplayRecords=iTotalDisplayRecords;
    	this.iTotalRecords = iTotalRecords;
    }

	public List<T> getAaData() {
		return aaData;
	}

	public void setAaData(List<T> aaData) {
		this.aaData = aaData;
	}

	public int getiTotalDisplayRecords() {
		return iTotalDisplayRecords;
	}

	public void setiTotalDisplayRecords(int iTotalDisplayRecords) {
		this.iTotalDisplayRecords = iTotalDisplayRecords;
	}

	public int getiTotalRecords() {
		return iTotalRecords;
	}

	public void setiTotalRecords(int iTotalRecords) {
		this.iTotalRecords = iTotalRecords;
	}
}

 

© 著作权归作者所有

共有 人打赏支持
绝对起航
粉丝 0
博文 9
码字总数 5306
作品 0
广州
加载中

评论(1)

绝对起航
绝对起航
新发现,第一种方法有时在tomcat里运行会导致datables无法再使用
JFinal整合datatables实现的表格

本人在最近一个小项目中整合的,看到osc上还没有,就发一个先。 欢迎大侠们拍砖。 界面table的代码: <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table...

胡小翔
2013/05/24
0
2
jfinal-admin 3.3 发布,Bug 修复更新

jfinal-admin 3.3 版本正式发布啦。该版本主要进行了一些 Bug 修复,主要更新内容如下: 1、登录加密算法更新,修复DES秘钥初始化的bug; 2、任务管理模块更新,修复任务调度配置时执行类参数...

IT小香猪
07/13
0
0
Datatables快速入门开发--一款好用的JQuery表格插件

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

冬至饮雪
2017/08/04
0
0
jfinal-admin 3.2 发布,beetl 模板升级到 2.7.14

jfinal-admin 3.2 版本正式发布啦。 基于JFinal的后台管理系统,采用了简洁强大的JFinal作为web框架,模板引擎用的是beetl,数据库用mysql,前端bootstrap框架。 演示地址 http://jad.yxyun...

IT小香猪
04/19
0
0
DataTables_详细使用方法

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

喵王不瞌睡
2015/05/02
0
1
dataTables相关资料参考

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

ahl123
07/02
0
0
OSC上关于Jfinal的提问整理(一)

看见Jfinal很火,就手痒痒了,想学一下,无奈入门较慢,没有找到比较全的文档。于是就经常看讨论区大家的提问与解答。后来就忽然萌生了整理下来的想法。其中的问题如果是@Jfinal 回答的,那我...

木川瓦兹
2013/04/23
0
21
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
DataTables 参数记录

晚上闲着没事,研究了下DataTables 插件的使用 部分参数记录如下: "oLanguage" : xx, //语言选项 一般可以用来进行汉化显示使用"sPaginationType" : "xx", //分页类型"sDom" : "xxx",//表格D...

享开发
2013/05/27
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Sparkstreaming and Kafka

简介 Kafka 0.10的Spark Streaming集成设计与0.8 Direct Stream方法类似。 它提供了简单的并行性,Kafka分区和Spark分区之间的1:1对应关系,以及对偏移量和元数据的访问。 但是,由于较新的...

舒运
11分钟前
0
0
java获取当前时间所在一周的周一和周日日期

/** * 当前时间所在一周的周一和周日时间 * @param time 当前时间 * @return */ public static Map getWeekDate(String time) { Map map = new HashedMap(); SimpleDateFormat sdf = new Si......

小弱鸡
38分钟前
0
0
Redis数据的导出和导入(dump和load方式)

网上有些文章已经不再适用,本人也是踩了些坑,在此记录下。 迁移redis数据一般有如下3种方式: 第三方工具redis-dump,redis-load aof机制,需要开启aof功能 rdb存储机制 这里介绍第一种方式...

iplusx
43分钟前
1
0
ElasticSearch 高亮显示大文档搜索结果

2016年12月,我们开始研究Ambar——一个文档搜索系统。Ambar使用ElasticSearch作为核心搜索引擎。 在Ambar开发的过程中,我们处理了很多与ES相关的问题,我们想分享我们得到的宝贵经验。让我...

九州暮云
今天
1
0
Python 使用 pywifi 模块 破解wifi密码

git https://github.com/awkman/pywifi 常见常量 from pywifi import const# Define interface status.IFACE_DISCONNECTED = 0IFACE_SCANNING = 1IFACE_INACTIVE = 2IFACE_CONNEC......

阿豪boy
今天
1
0
phpstorm使用Iedis

phpstorm的redis插件Iedis是真好用 看了网上挺多的文章,但是由于我系统还是ubuntu,就有点尴尬了,现在破解之后,留个笔记,即使自己之后有需要也可以很快翻阅 先下载资源 资源下载 zip压缩...

贤郎--均灵
今天
0
0
第三章 spring-bean之FactoryBeanRegistrySupport(4)

前言 从FactoryBeanRegistrySupport类的名字可以看出FactoryBeanRegistrySupport负责FactoryBean的注册与支持。如果想知道FactoryBean相关的资料,请阅读spring-bean中关于FactoryBean的解读...

鸟菜啊
今天
0
0
CentOS “Destination Host Unreachable”问题解决办法

挑战极速安装CentOS时遇到局域网主机不能通信的情况: [root@zjd network-scripts]# ping 8.8.8.8PING 8.8.8.8 (8.8.8.8) 56(84) bytes of data.64 bytes from 8.8.8.8: icmp_seq=1 ttl=......

wffger
今天
0
0
CentoOS6.6安装netcat

CentOS下安装netcat 使用zookeeper过程中,需要监控集群状态。在使用四字命令时(echo conf | nc localhost 2181),报出如下错误:-bash: netcat: command not found。 我的系统是CentOS 6....

ghou-靠墙哭
今天
0
0
es6之解构赋值巧用

ES6 允许按照一定模式,从数组、对象等中提取值,对变量进行赋值,这被称为解构赋值。 如何进行解构赋值我这里就不赘述,本篇文章主要是将解构赋值的巧妙使用之处。 1、交互变量的值 常用交互...

秋季长青
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部