Ext分頁實現(前臺與後臺)Spring+Mybatis
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應該如何書寫,以及引數如何傳遞接收等。其他後臺語言的程式碼與此類似。