easyui 分页插件

分页往往是依附于数据表格的，所以我们就使用的是easyui的treegrid组件，来开启pagination分页组件，为了方便，我们使用JS实现。

表格显示初始化

<!-- fitColumns="true" 自适应宽度 -->
<table id="myTable" fitColumns="true"></table>

<script>
		$(function () {
			
			$('#myTable').treegrid({    
			    url:'/category/position/Test',    
			    idField:'id',    
			    treeField:'region',
			    method:'GET',
				pagination:true, 			// 开启分页配置 
			    singleSelect:false,
			    columns:[[   
			    	{field:'checkbox',checkbox:'true'},
			        {title:'编号',field:'id',width:200,align:'center'},
			        {title:'职位名称',field:'region',width:1044},    
			        {title:'职位排序',field:'sortNumber',width:200,align:'center',sortable: true}
			    ]]
			})
			
			  var p = $('#myTable').treegrid('getPager');
				$(p).pagination({
					pageSiez:10,// 每页显示的记录条数 ，默认是10
					pageList:[1,10,15,20],// 可以设置每页记录条数的列表
					beforePageText:'第',  // 页数文本框前显示的汉字
					afterPageText:'页  共{pages}页',
					displayMsg:'当前显示 {from} - {to} 条记录  共  {total} 条记录'
				})
		})
	</script>

效果图

分页分两种

• 假分页
           假分页就是将所有要显示的数据全部查询出来后，进行前台的分页，适合数据量较小的Web项目。

• 真分页
           真分页相对假分页来说麻烦了一些，但是对于数据量大的系统来说，可以很好的，快速的查询数据。要想实现分页，我们就得先知道分页的原理，首先我们需要将[第几页(page)]和[一页多少数据(rows)]传递给后台，以便查询，EasyUI非常方便的给我们提供了自动将这两个参数传到后台的事件，当我们刚开始加载数据的时候，我们可以看到如图，
  
  这里用的就是真分页，根据前台传过来的page和rows查询数据
  
  
  然后后台根据前台传过来的当前页和每页显示的数据去数据库分页查询出数据并返回到前台去就行了
  注意这里拿Result结果集返回,需要返回的数据有total（总数据）级rows（数据源）

			@ResponseBody
			@GetMapping("/Test")
			private Result Test(Integer page,Integer rows){ // 后台接收前台传过来的数据
				// 然后转service层，作各种数据判断
				// 这里就不写了，各位看官自行摸索吧
			｝

public class Result {
	private int code=0;
	private String msg;
	private int total;
	private Object obj; 
	private List rows;
}