jq easyui數(shù)據(jù)網(wǎng)絡(luò)的分頁過程

Rainie 發(fā)布于2019-08-21 10:53 / 2098人閱讀

摘要：在涉及到組件的分頁功能時，遇到了一點問題。由于數(shù)據(jù)較多，這邊不予展示。返回的數(shù)據(jù)必須是符合要求的數(shù)據(jù)，格式如下必須帶有屬性，屬性值為總共的數(shù)據(jù)條數(shù)，是這一頁的數(shù)據(jù)內(nèi)容，以數(shù)組對象的形式返回。

第一次寫技術(shù)方面的文章，有點忐忑，總怕自己講的不對誤導(dǎo)別人。但是萬事總有個開頭，有不足錯誤之處，請各位讀者老爺指出。

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

我們在處理分頁時，通常有兩種方式，前端分頁和后臺分頁。前端分頁會將后臺數(shù)據(jù)一次性全部查詢返回，然后在前端存儲處理。這樣的方式缺點很明顯，如果數(shù)據(jù)量非常大，存儲在前端顯然是一種非常不明智的方式，對于性能有明顯影響。

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

   
    
        
            姓名
            學(xué)號
            學(xué)校
            專業(yè)
            操作

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

我們這邊用nodejs搭建一個簡單的web服務(wù)器，來看看后臺是怎么進行分頁的。定義一個json對象，模擬一下數(shù)據(jù)庫里的數(shù)據(jù)。由于數(shù)據(jù)較多，這邊不予展示。當(dāng)easyui發(fā)送請求過來時，我們先獲取它帶的參數(shù)，這兩個參數(shù)是以query方式帶過來的。

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

根據(jù)拿到的page和row兩個值確定該頁面返回的數(shù)據(jù)。返回的數(shù)據(jù)必須是符合easyui要求的json數(shù)據(jù)，格式如下:

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

必須帶有total屬性，屬性值為總共的數(shù)據(jù)條數(shù)，returnArray是這一頁的數(shù)據(jù)內(nèi)容，以數(shù)組對象的形式返回。返回前端后，easyui會自動幫你把數(shù)據(jù)填充。這樣一來，我們就理解了這個分頁的原理。

但是問題來了，easyui每一次改變當(dāng)前頁碼，都會向后臺發(fā)起一次請求。我們知道，在web項目中，大量的http請求會影響性能，easyui如此頻繁的請求操作，是不是也值得商榷呢？這也導(dǎo)致了大量的重復(fù)對數(shù)據(jù)庫的查詢操作，因為我們要根據(jù)頁碼來獲取不同區(qū)間的數(shù)據(jù)集。

不知道大家有沒有什么好的方法呢？歡迎指正。