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

原创
2017/07/08 10:08
阅读数 1.7K

分页原理

输入图片说明

左边的数字是表示每页的显示条数,可以自由选择,如果一共有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
				});

  1. 在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;
	}
}

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部