Ext分页实现(前台与后台)

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 &gt; ${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应该如何书写，以及参数如何传递接收等。其他后台语言的代码与此类似。