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應該如何書寫，以及引數如何傳遞接收等。其他後臺語言的程式碼與此類似。