datatables 带查询条件java服务端分页处理

最新推荐文章于 2021-02-17 01:47:21 发布

最新推荐文章于 2021-02-17 01:47:21 发布 · 417 阅读

文章标签：

#java #javascript #json #ViewUI

最近做东西有一个需求，因为数据量很大，而实际上用户并不会对所有数据都感兴趣，如果用户直接翻页到最后一页的话，查询速度会很慢，影响用户体验，所以将分页控件处理成百度检索的效果，也就是用户不能直接点击到最后一页。

在这里我决定使用强大的datatables。datatables的“simple_numbers”的分页模式，比较接近需要的效果。

那么问题来了，因为数据量比较大，分页是需要在服务端进行的，同时还需要传递查询条件到服务端。怎样传递数据到后台呢？

先来看前台代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico"
	href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">

<link rel="stylesheet" type="text/css"
	href="../../js/DataTables-1.10.8/media/css/jquery.dataTables.css">
<script type="text/javascript" language="javascript"
	src="../../js/DataTables-1.10.8/media/js/jquery.js"></script>
<script type="text/javascript" language="javascript"
	src="../../js/DataTables-1.10.8/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" class="init">
	var table;
$(document).ready(function() {
	table = $('#example').DataTable( {
		"pagingType": "simple_numbers",//设置分页控件的模式
		 searching: false,//屏蔽datatales的查询框
		 aLengthMenu:[10],//设置一页展示10条记录
		 "bLengthChange": false,//屏蔽tables的一页展示多少条记录的下拉列表
		 "oLanguage": {  //对表格国际化
			"sLengthMenu": "每页显示 _MENU_条",  
			"sZeroRecords": "没有找到符合条件的数据",  
		//	"sProcessing": "&lt;img src=’./loading.gif’ /&gt;",  
			"sInfo": "当前第 _START_ - _END_ 条　共计 _TOTAL_ 条",  
			"sInfoEmpty": "木有记录",  
			"sInfoFiltered": "(从 _MAX_ 条记录中过滤)",  
			"sSearch": "搜索：",  
			"oPaginate": {  
			"sFirst": "首页",  
			"sPrevious": "前一页",  
			"sNext": "后一页",  
			"sLast": "尾页"  
				 
			}  
		},
	"processing": true, //打开数据加载时的等待效果
        "serverSide": true,//打开后台分页
        "ajax": {
            "url": "../../alarms/datatablesTest", 
            "dataSrc": "aaData", 
            "data": function ( d ) {
            	var level1 = $('#level1').val();
                //添加额外的参数传给服务器
                d.extra_search = level1;
            }
        },
        "columns": [
            { "data": "total" },
            { "data": "level" }
        ]
	
	} );
} );


function search1()
{
	table.ajax.reload();
}

	</script>
</head>

<body class="dt-example">


	<div>
		<input type="text" id="level1"> 
		<input type="button" onclick="search1()"  value="查询">
	</div>

	<table id="example" class="display" cellspacing="0" width="100%">
		<thead>
			<tr>
				<th>Name</th>
				<th>Position</th>
			</tr>
		</thead>
	</table>



</body>
</html>

java代码如下，使用spring的 @ResponseBody将结果转换成json格式返回给前台

@RequestMapping(value="/datatablesTest", method=RequestMethod.GET)
	@ResponseBody
	public DatatablesViewPage<Alarm> datatablesTest(HttpServletRequest request){
//获取分页控件的信息
		String start = request.getParameter("start");
		System.out.println(start);
                String length = request.getParameter("length");
		System.out.println(length);
//获取前台额外传递过来的查询条件
		String extra_search = request.getParameter("extra_search");
		System.out.println(extra_search);
                //随便组织的查询结果
		List<Alarm> list  = new ArrayList<Alarm>();
		Alarm alarm = new Alarm();
		alarm.setLevel(1);
		alarm.setTotal(100L);
		list.add(alarm);
		alarm = new Alarm();
		alarm.setLevel(2);
		alarm.setTotal(100L);
		list.add(alarm);
		
		
		DatatablesViewPage<Alarm> view = new DatatablesViewPage<Alarm>();
		view.setiTotalDisplayRecords(100);
		view.setiTotalRecords(100);
		
		view.setAaData(list);
		return view;
	}

DatatablesViewPage的声明如下：

public class DatatablesViewPage<T> {

	private List<T> aaData; //aaData 与datatales 加载的“dataSrc"对应
	private int iTotalDisplayRecords; 
	private int iTotalRecords;
	public DatatablesViewPage() {
		
	}
//get set方法 此处省略

}

处理完效果如下:

此处稍微修改了jquery.dataTables.js的内容，使分页的效果成这样。