文档章节

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

桃之夭妖
 桃之夭妖
发布于 2017/07/08 10:08
字数 1080
阅读 89
收藏 0

分页原理

输入图片说明

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

© 著作权归作者所有

桃之夭妖
粉丝 1
博文 11
码字总数 6811
作品 0
成都
程序员
私信 提问
jquery easyui datagrid 分页数据请求

jquery easyui datagrid内置了分页的功能,当设置为 pagination: true 以后就能够启用分页功能。 启用分页以后,jquery easyui datagrid发送的数据请求中会包含两个参数: int iPageIndex =...

我吃火锅你吃调料-快给我打钱-房子不要钱
2015/11/02
0
0
使用easyui的DataGrid实现即时编辑(CRUD)

首先来个users.sql /MySQL Data TransferSource Host: localhostSource Database: mydbTarget Host: localhostTarget Database: mydbDate: 2011/6/3 13:59:12/ SET FOREIGNKEYCHECKS=0; -- T......

styleman
2018/05/10
0
0
jQuery EasyUI DataGrid Checkbox 数据设定与取值

有关 jQuery EasyUI DataGrid 的相关资料,可以前往官网查看, jQuery EasyUI 官网 jQuery EasyUI Documentation DataGrid Demo CheckBox select on DataGrid...

Amamatthew
2014/10/10
0
0
JQuery EasyUi之界面设计——前言与界面效果(一)

如果冯巩的开场白是“观众朋友们,我想死你们了”,那么我的开场白是“最近一直很忙,很久没有发文了”。 前面说过了EXT.NET,这里顺便再说说JQuery EasyUI。为啥我会选择JQuery EasyUI呢?主...

易水寒丶开源
2015/10/27
0
0
jquery jsp 获取被选中的数据中的日期值

$(function(){ $('#xmhk').datagrid({ url:'../json/getCashList.jsp', iconCls:'icon-save', nowrap: false, striped: true, collapsible:true, remoteSort: false, fitColumns: true, sort......

wenwen1
2012/08/27
2.1K
1

没有更多内容

加载失败,请刷新页面

加载更多

【AI实战】手把手教你深度学习文字识别(文字检测篇:基于MSER, CTPN, SegLink, EAST等方法)

文字检测是文字识别过程中的一个非常重要的环节,文字检测的主要目标是将图片中的文字区域位置检测出来,以便于进行后面的文字识别,只有找到了文本所在区域,才能对其内容进行识别。 文字检...

雪饼
今天
5
0
思维导图XMind 8 Pro 绿化方法(附序列号)

按部就班: Step 1 -全新下载最新版本的 Xmind 8(注必须是英文官方的版本,中文代{过}{滤}理网站的版本修改过,无法使用pj); Step 2 -安装完毕后,点击文末的下载按钮下载pj补丁文件包,将...

一只小青蛙
今天
10
0
数据结构(ER数据库)设计规范

表命名规范 表命名的规则分为3个层级,层级之间通过_分割,例如b_r_identity、d_l_identity。规约为: [leavel]_[type]_[name] [leavel] 表示数据库表的层级和功能,分为: s:业务无关的系统...

随风溜达的向日葵
今天
5
0
阿里Sentinel控制台源码修改-对接Apollo规则持久化

https://github.com/alibaba/Sentinel/wiki/%E5%9C%A8%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83%E4%B8%AD%E4%BD%BF%E7%94%A8-Sentinel 动态规则扩展 https://github.com/alibaba/Sentinel/wiki......

jxlgzwh
昨天
8
0
在Linux系统中创建SSH服务器别名

如果你经常通过 SSH 访问许多不同的远程系统,这个技巧将为你节省一些时间。你可以通过 SSH 为频繁访问的系统创建 SSH 别名,这样你就不必记住所有不同的用户名、主机名、SSH 端口号和 IP 地...

老孟的Linux私房菜
昨天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部