Ext分頁實現(前台與后台)

Ext分頁實現(前台與后台)Spring+Mybatis

一、項目背景

　　關於Ext的分頁網上有很多博客都有提到，但是作為Ext新手來說，並不能很容易的在自己的項目中得以應用。因為，大多數教程以及博客基本都是只寫了前端的東西，而關於分頁算法更多的應該是后台。並且大多數數據庫的sql基本都是通用的，但是對於分頁sql語句來講，不同的數據庫，又有着自己不同的語句。在本篇博文中，博主將詳細介紹關於Ext前端與后台的實現。項目所采用的數據庫是sql server，項目架構是Spring+Mybatis。

二、分頁前台實現

　　在前台分頁中客戶端發送參數到服務器端，服務器需要解析並且做出響應，返回相應的數據。Ext.toolbar.Paging是專用的分頁工具欄，綁定數據並提供自動分頁控制。通過傳遞參數來控制分頁。

var itemsPerPage= 2;   // 設置你想要的每頁顯示條數

var store = Ext.create('Ext.data.Store', {
    id:'simpsonsStore',
    autoLoad:{start:0,limit:itemsPerPage},
    fields:['name', 'email', 'phone'],
    proxy: {
        type: 'ajax',
        url: 'pagingstore.js',  // 請求URL加載數據
        reader: {
            type: 'json',
            root: 'items',
            totalProperty: 'total'
        }
    }
});

　　在上述代碼中是屬於Ext的分頁的前端代碼，其中有這樣幾個屬性必須特別注意，autoLoad:{start:0,limit:itemsPerPage},，與數據有關的items，與分頁有關的total，這些需要和我們的后台進行一一對應的關系。在實現后台時候，將會詳細進行解釋。

二、后台實現

　　在后台中，我們已經將Spring+Mybatis的架構搭建完成，並且在sql server數據庫中有這樣一張表（Company），表中包含了3個字段，CompId,CompName,CompNum。根據數據庫完成主要的實體書寫，XML文件書寫，MappingDao。

　　接下來，為了進行分頁，我們需要寫一個Page類其主要代碼如下：

package com.test.util;

public class Page {
    private int start;
    private int limit;
    public int getStart() {
        return start;
    }
    public void setStart(int start) {
        this.start = start;
    }
    public int getLimit() {
        return limit;
    }
    public void setLimit(int limit) {
        this.limit = limit;
    }
    public Integer getPage(){
        return (start/limit)+1;
    }

}

　　分頁的sql語句，因為ext傳遞到前台的只有兩個值，所以將sql語句如所示，其中關於傳遞整數應該使用${}方式。“>”是“>”。其中的參數是Page對象。

    <!-- 分頁算法 -->
    <select id="findPage"  parameterType="com.test.util.Page" resultType="com.entity.Company">
        SELECT TOP ${limit} *FROM
           (SELECT ROW_NUMBER() OVER (ORDER BY compId) AS RowNumber,* FROM Company)   as A
         WHERE RowNumber &gt; ${limit}*(${page}-1)
    </select>

　　Controller代碼

    //前台ajax獲取路徑的url
    @RequestMapping("/testList")
    public void datalist(HttpServletRequest req,HttpServletResponse res) throws Exception{
        res.setContentType("text/plain");  
        int start = Integer.parseInt(req.getParameter("start"));//從前台傳遞的值
        int limit = Integer.parseInt(req.getParameter("limit"));
         Page page = new Page();
            page.setStart(start);
            page.setLimit(limit);
            List<Company> list = dao.findPage(page);
        //數據總的記錄數
        int x = dao.findTotalNum();
        JSONArray jsonArray = JSONArray.fromObject(list);
        StringBuffer sb = new StringBuffer();
        sb.append("{");
        sb.append("total:" + x + ",");
        sb.append("items:");
        sb.append(jsonArray.toString());
        sb.append("}");
        AjaxResponse.sendResponse(req,res,sb);
    }

　　在上述代碼中，其中的total與items也與前台代碼中的保持一致。這樣Ext的分頁也就完全實現了。

　　總結

　　關於Ext的分頁，前端代碼比較簡單，更主要的是后台的邏輯，不同數據庫的分頁sql應該如何書寫，以及參數如何傳遞接收等。其他后台語言的代碼與此類似。