Jquery easyUI—datagrid数据表格分页原理以及实现

分页原理

左边的数字是表示每页的显示条数，可以自由选择，如果一共有100条数据，选择10就代表每页显示10条，一共有10页，选择其它数字则依次类推。 可以在创建datagrid控件的时候，设置属性 ：pageList: [30,50,100], 通过抓包工具抓取数据如下： 第一次加载查看请求的json数据：

请求第二页请求的数据：

分析：page表示页码，rows表示 每页需要记录条数 由上可知，前端可以通过向后端传入page和rows向后端请求分页的数据，而服务器要根据请求参数page和rows查询分页数据，并且以标准格式返回。 返回的格式就是：

{
    total: 总记录数,
    rows: [   //当前页数据
        {*************},
        {**************} 
    ]
}

请求数据：page 页码，rows 每页记录数 响应数据： total 总记录数 , rows 当前页数据记录数

编写服务器代码实现分页查询

后端技术： maven+struts2+spring+spring data jpa

1. 修改数据表格的url：

$('#grid').datagrid( {
					iconCls : 'icon-forward',
					fit : true,
					border : false,
					rownumbers : true,
					striped : true,
					pageList: [30,50,100],
					pagination : true,
					toolbar : toolbar,
					url : "../../standard_pageQuery.action",
					idField : 'id',
					columns : columns
				});

2. 在action中添加分页查询的方法 页面会自动发送；两个请求的参数：page 页码 rows 每页记录数

action代码的编写：

                /**
		 * 因为要返回total和rows
		 * 最开始的思路是分别写方法查询
		 */
		//1.调用业务层,查询总记录数
		long total = standardService.findTotal();
		//2.调用业务层，查询当前页的数据
		List<Standard> standards = standardService.findPageData();

_ 在查询当前页数据的时候遇到问题，到底是分别传参呢还是把封装后再传？_ 最终要考虑的是spring data 到底如何做分页？ 因为spring data jpa 的父接口是Repository, 则查看Repository的源码：

public interface Repository<T, ID extends Serializable>

查看继承树可以看到有个：PagingAndSortingRepository<T, ID >

@NoRepositoryBean
public interface PagingAndSortingRepository<T, ID extends Serializable> extends CrudRepository<T, ID> {

	/**
	 * Returns all entities sorted by the given options.
	 * 
	 * @param sort
	 * @return all entities sorted by the given options
	 */
	Iterable<T> findAll(Sort sort);

	/**
	 * Returns a {@link Page} of entities meeting the paging restriction provided in the {@code Pageable} object.
	 * 
	 * @param pageable
	 * @return a page of entities
	 */
	Page<T> findAll(Pageable pageable);
}

**由上可知，spring data jpa 提供了分页查询的方法，接受pageable的参数，那么问题来了，到底什么是pageable呢？要如何来实现？ ** 查看源码可是pageable是一个接口，查看实现类

spring data 提供PageRequest对象，实现Pageable接口，源码如下

public PageRequest(int page, int size) {
		this(page, size, null);
	}

由上面的分析可知：我们只要创建一个Pageable的对象即可。

因为Page<T>已经实现了封装总记录数，和每页记录的数据，就不需要再单独写方法去查询总的记录数了。

代码如下：

                //调用业务层，查询分页信息
		Pageable pageable = new PageRequest(page-1,rows);
		Page<Standard> pageData = standardService.findPageData(pageable);

注意：因为在PageRequest的实现中，page参数是从0开始的，因为我们传入的参数要：page-1

业务层代码：

public interface StandaredService {

	Page<Standard> findPageData(Pageable pageable);

}

业务层实现：

@Service
@Transactional
public class StandardServiceImpl implements StandaredService {
	//注入Dao层
	@Autowired
	private StandardRepository standardRepository;

	@Override
	public Page<Standard> findPageData(Pageable pageable) {
		return standardRepository.findAll(pageable);
	}
	
}

因为方法是spring data jpa自带的，不需要写DAO层代码

将数据转为json，有很多种方法，简单起见，这里直接使用spring自带的 struts2-json-plugin

在pom.xml中导入json插件:

            <dependency>
			<groupId>org.apache.struts</groupId>
			<artifactId>struts2-json-plugin</artifactId>
			<version>${struts2.version}</version>
		</dependency>

struts2-json-plugin用法：默认的是把ValueStack 顶部的对象转为json返回 因此，只需要把要返回前台的是数据压入值栈即可。

                // 将map转换为json数据返回 使用struts2-json-plugin插件
		ActionContext.getContext().getValueStack().push(result);

在struts-json-plugin配置，有result-type，要实现type=“json”,类就要去继承json-default这个包

action代码：

@Controller
@ParentPackage("json-default")
@Namespace("/")
@Scope("prototype")
public class StandradAction extends ActionSupport  {
	
	//调用Service层
	@Autowired
	private StandaredService standardService;
	
	//属性驱动
	private Integer page;
	private Integer rows;
	
	public void setPage(Integer page) {
		this.page = page;
	}
	public void setRows(Integer rows) {
		this.rows = rows;
	}
	@Action(value="standard_pageQuery",
			results={@Result(name="success",type="json")})
	public String pageQuery(){
		//调用业务层，查询分页数据结果
		Pageable pageable = new PageRequest(page-1,rows);
		Page<Standard> pageData = standardService.findPageData(pageable);
		
		// 返回客户端数据需要total和rows
		Map<String,Object> result = new HashMap<String,Object>();
		result.put("total", pageData.getNumberOfElements());
		result.put("rows", pageData.getContent());
		
		// 将map转换为json数据返回 使用struts2-json-plugin插件
		ActionContext.getContext().getValueStack().push(result);
		return SUCCESS;
	}
}

转载于:https://my.oschina.net/wuzhentao/blog/1212673