jq easyui數據網絡的分頁過程

第一次寫技術方面的文章，有點忐忑，總怕本身講的不對誤導別人。可是萬事總有個開頭，有不足錯誤之處，請各位讀者老爺指出。

言歸正傳，最近剛進新公司，上頭要求我先熟悉熟悉easyui這個組件庫。在涉及到datagrid組件的分頁功能時，遇到了一點問題。

咱們在處理分頁時，一般有兩種方式，前端分頁和後臺分頁。前端分頁會將後臺數據一次性所有查詢返回，而後在前端存儲處理。這樣的方式缺點很明顯，若是數據量很是大，存儲在前端顯然是一種很是不明智的方式，對於性能有明顯影響。

那咱們來看看easyui處理分頁的方式。

<table  class="easyui-datagrid" title="學生信息" style="width:700px;height:250px;"
    data-options="singleSelect:true,collapsible:true,url:'http://localhost:3000/ge',method:'get',pagination:true" toolbar="#tool"> 
    <thead>
        <tr>
            <th data-options="field:'name',width:150,align:'center'">姓名</th>
            <th data-options="field:'num',width:150,align:'center'">學號</th>
            <th data-options="field:'school',width:150,align:'center'">學校</th>
            <th data-options="field:'major',width:150,align:'center'">專業</th>
            <th data-options="field:'xuewei',width:100,align:'center'">操做</th>
        </tr>
    </thead>
</table>

以上是頁面上的代碼，當設置pagination屬性爲true時，easyui會自動加上一個分頁器。這個分頁器，當頁面加載或者是用戶改變當前頁面時，easyui會以ajax的方式發送給後臺兩個參數:page和row。page是指當前頁碼，row指一頁顯示多少條信息。

咱們這邊用nodejs搭建一個簡單的web服務器，來看看後臺是怎麼進行分頁的。定義一個json對象，模擬一下數據庫裏的數據。因爲數據較多，這邊不予展現。當easyui發送請求過來時，咱們先獲取它帶的參數，這兩個參數是以query方式帶過來的。

var page = req.query.page;//page當前頁
var row = req.query.rows;//頁面最多幾條
var start = (page-1)*row;//查詢起始位置
var end = page*row-1;//查詢結束位置

根據拿到的page和row兩個值肯定該頁面返回的數據。返回的數據必須是符合easyui要求的json數據，格式以下:

{"total":length,"rows":returnArray}

必須帶有total屬性，屬性值爲總共的數據條數，returnArray是這一頁的數據內容，以數組對象的形式返回。返回前端後，easyui會自動幫你把數據填充。這樣一來，咱們就理解了這個分頁的原理。

可是問題來了，easyui每一次改變當前頁碼，都會向後臺發起一次請求。咱們知道，在web項目中，大量的http請求會影響性能，easyui如此頻繁的請求操做，是否是也值得商榷呢？這也致使了大量的重複對數據庫的查詢操做，由於咱們要根據頁碼來獲取不一樣區間的數據集。

不知道你們有沒有什麼好的方法呢？歡迎指正。