Ext分页实现(前台与后台)Spring+Mybatis
一、项目背景
关于Ext的分页网上有很多博客都有提到,但是作为Ext新手来说,并不能很容易的在自己的项目中得以应用。因为,大多数教程以及博客基本都是只写了前端的东西,而关于分页算法更多的应该是后台。并且大多数数据库的sql基本都是通用的,但是对于分页sql语句来讲,不同的数据库,又有着自己不同的语句。在本篇博文中,博主将详细介绍关于Ext前端与后台的实现。项目所采用的数据库是sql server,项目架构是Spring+Mybatis。
二、分页前台实现
在前台分页中客户端发送参数到服务器端,服务器需要解析并且做出响应,返回相应的数据。Ext.toolbar.Paging是专用的分页工具栏,绑定数据并提供自动分页控制。通过传递参数来控制分页。
1 var itemsPerPage= 2; // 设置你想要的每页显示条数
2
3 var store = Ext.create('Ext.data.Store', {
4 id:'simpsonsStore',
5 autoLoad:{start:0,limit:itemsPerPage},
6 fields:['name', 'email', 'phone'],
7 proxy: {
8 type: 'ajax',
9 url: 'pagingstore.js', // 请求URL加载数据
10 reader: {
11 type: 'json',
12 root: 'items',
13 totalProperty: 'total'
14 }
15 }
16 });
在上述代码中是属于Ext的分页的前端代码,其中有这样几个属性必须特别注意,autoLoad:{start:0,limit:itemsPerPage},,与数据有关的items,与分页有关的total,这些需要和我们的后台进行一一对应的关系。在实现后台时候,将会详细进行解释。
二、后台实现
在后台中,我们已经将Spring+Mybatis的架构搭建完成,并且在sql server数据库中有这样一张表(Company),表中包含了3个字段,CompId,CompName,CompNum。根据数据库完成主要的实体书写,XML文件书写,MappingDao。
接下来,为了进行分页,我们需要写一个Page类其主要代码如下:
1 package com.test.util;
2
3 public class Page {
4 private int start;
5 private int limit;
6 public int getStart() {
7 return start;
8 }
9 public void setStart(int start) {
10 this.start = start;
11 }
12 public int getLimit() {
13 return limit;
14 }
15 public void setLimit(int limit) {
16 this.limit = limit;
17 }
18 public Integer getPage(){
19 return (start/limit)+1;
20 }
21
22 }
分页的sql语句,因为ext传递到前台的只有两个值,所以将sql语句如所示,其中关于传递整数应该使用${}方式。“>”是“>”。其中的参数是Page对象。
1 <!-- 分页算法 -->
2 <select id="findPage" parameterType="com.test.util.Page" resultType="com.entity.Company">
3 SELECT TOP ${limit} *FROM
4 (SELECT ROW_NUMBER() OVER (ORDER BY compId) AS RowNumber,* FROM Company) as A
5 WHERE RowNumber > ${limit}*(${page}-1)
6 </select>
Controller代码
1 //前台ajax获取路径的url
2 @RequestMapping("/testList")
3 public void datalist(HttpServletRequest req,HttpServletResponse res) throws Exception{
4 res.setContentType("text/plain");
5 int start = Integer.parseInt(req.getParameter("start"));//从前台传递的值
6 int limit = Integer.parseInt(req.getParameter("limit"));
7 Page page = new Page();
8 page.setStart(start);
9 page.setLimit(limit);
10 List<Company> list = dao.findPage(page);
11 //数据总的记录数
12 int x = dao.findTotalNum();
13 JSONArray jsonArray = JSONArray.fromObject(list);
14 StringBuffer sb = new StringBuffer();
15 sb.append("{");
16 sb.append("total:" + x + ",");
17 sb.append("items:");
18 sb.append(jsonArray.toString());
19 sb.append("}");
20 AjaxResponse.sendResponse(req,res,sb);
21 }
在上述代码中,其中的total与items也与前台代码中的保持一致。这样Ext的分页也就完全实现了。
总结
关于Ext的分页,前端代码比较简单,更主要的是后台的逻辑,不同数据库的分页sql应该如何书写,以及参数如何传递接收等。其他后台语言的代码与此类似。