摘要:在涉及到組件的分頁功能時,遇到了一點問題。由于數據較多,這邊不予展示。返回的數據必須是符合要求的數據,格式如下必須帶有屬性,屬性值為總共的數據條數,是這一頁的數據內容,以數組對象的形式返回。
第一次寫技術方面的文章,有點忐忑,總怕自己講的不對誤導別人。但是萬事總有個開頭,有不足錯誤之處,請各位讀者老爺指出。
言歸正傳,最近剛進新公司,上頭要求我先熟悉熟悉easyui這個組件庫。在涉及到datagrid組件的分頁功能時,遇到了一點問題。
我們在處理分頁時,通常有兩種方式,前端分頁和后臺分頁。前端分頁會將后臺數據一次性全部查詢返回,然后在前端存儲處理。這樣的方式缺點很明顯,如果數據量非常大,存儲在前端顯然是一種非常不明智的方式,對于性能有明顯影響。
那我們來看看easyui處理分頁的方式。
姓名 | 學號 | 學校 | 專業 | 操作 |
---|
以上是頁面上的代碼,當設置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如此頻繁的請求操作,是不是也值得商榷呢?這也導致了大量的重復對數據庫的查詢操作,因為我們要根據頁碼來獲取不同區間的數據集。
不知道大家有沒有什么好的方法呢?歡迎指正。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/49858.html
摘要:在涉及到組件的分頁功能時,遇到了一點問題。由于數據較多,這邊不予展示。返回的數據必須是符合要求的數據,格式如下必須帶有屬性,屬性值為總共的數據條數,是這一頁的數據內容,以數組對象的形式返回。 第一次寫技術方面的文章,有點忐忑,總怕自己講的不對誤導別人。但是萬事總有個開頭,有不足錯誤之處,請各位讀者老爺指出。 言歸正傳,最近剛進新公司,上頭要求我先熟悉熟悉easyui這個組件庫。在涉及到...
摘要:最近在做手機端,發現下拉刷新和上拉加載的控件很少而且自我感覺不好用,比如之類然后自己寫了個懶加載的,也很簡單,最基礎的代碼不喜勿噴,但蠻實用的手機端懶加載分頁用之前先引用下這里的表示距離底部像素觸發,可自行調節第頁這里放你的分頁代碼這是刷 最近在做手機端,發現下拉刷新和上拉加載的jq控件很少而且自我感覺不好用,比如iscroll之類…… 然后自己寫了個懶加載的,也很簡單,最基礎的代碼【...
閱讀 3427·2021-09-26 09:46
閱讀 2782·2021-09-13 10:23
閱讀 3510·2021-09-07 10:24
閱讀 2388·2019-08-29 13:20
閱讀 2919·2019-08-28 17:57
閱讀 3072·2019-08-26 13:27
閱讀 1174·2019-08-26 12:09
閱讀 505·2019-08-26 10:27