更近有個(gè)項(xiàng)目涉及到了這個(gè)問題，以前不管是數(shù)據(jù)量多或者量少一直用的是后端的分頁(yè)方式，從來沒想過直接前端分頁(yè)。偶然有這樣的要求。就在網(wǎng)上翻閱了一些資料。下面是廣州網(wǎng)站制作小編搜集的一些信息，與大家分享之。

前端分頁(yè)一般用于數(shù)據(jù)量較小的情況，一次請(qǐng)求把數(shù)據(jù)全部從后端請(qǐng)求回來。后端分頁(yè)適用于數(shù)據(jù)量偏大時(shí)的情況，減小請(qǐng)求傳輸壓力。前端需要將每頁(yè)條數(shù)和當(dāng)前頁(yè)傳給后端，后端根據(jù)條件查詢出數(shù)據(jù)再傳給前端，包括總條數(shù)、當(dāng)前頁(yè)、每頁(yè)多少條數(shù)據(jù)等。

前端分頁(yè)減少了后臺(tái)的代碼量。但卻要犧牲讀數(shù)據(jù)的速度。比如10萬(wàn)條記錄，后臺(tái)讀出發(fā)給前臺(tái)。前臺(tái)再分析后分頁(yè)，當(dāng)然翻頁(yè)可以直接使用而不需再訪問后臺(tái)。但是現(xiàn)在都講究速度。如果5秒還出不來數(shù)據(jù)，也會(huì)讓用戶等不及。后臺(tái)分頁(yè)，雖然需要每次都訪問數(shù)據(jù)。但一般，后端速度都比較不錯(cuò)，如果每頁(yè)數(shù)據(jù)量都不大的情況下，速度就好多了。而且后端程序語(yǔ)言分頁(yè)的功能相對(duì)于前端而言要更加的強(qiáng)大。

但是對(duì)于局部刷新的數(shù)據(jù)采用前端分頁(yè)用戶體驗(yàn)較好，比如評(píng)論列表，贊用戶列表。當(dāng)然也有2種模式結(jié)合的，比如微博列表加載數(shù)據(jù)，前10頁(yè)是ajax獲取分頁(yè)數(shù)據(jù)，后10頁(yè)是后端分頁(yè)，在前10頁(yè)上的a標(biāo)簽上也加上src地址利于蜘蛛抓取，但是禁用錨點(diǎn)鏈接功能改用click通過ajax獲取數(shù)據(jù)。兩個(gè)方案的應(yīng)用場(chǎng)景不同，按你們的需求來實(shí)現(xiàn)吧。

推薦幾個(gè)實(shí)用的前端分頁(yè)插件

1、Layui 是一款采用自身模塊規(guī)范編寫的國(guó)產(chǎn)前端UI框架，遵循原生HTML/CSS/JS的書寫與組織形式。

2、jQuery Pagination分頁(yè)插件

此jQuery插件為Ajax分頁(yè)插件，一次性加載，故分頁(yè)切換時(shí)無刷新與延遲，如果數(shù)據(jù)量較大不建議用此方法，因?yàn)榧虞d會(huì)比較慢。

3、jQuery 分頁(yè)插件 : jqPaginator

jqPaginator簡(jiǎn)潔、高度自定義的jQuery分頁(yè)組件，適用于多種應(yīng)用場(chǎng)景。關(guān)鍵的一點(diǎn)就是高度自定義的Html結(jié)構(gòu)。所以jqPaginator努力做到合理范圍內(nèi)的自定義，使其靈活的使用了各種不同的場(chǎng)景。

對(duì)于一個(gè)前端而言，無論是新手還是老手，有一種東西從來都是實(shí)用的，那就是插件。上面幾個(gè)web前端的分業(yè)插件是廣州網(wǎng)站制作認(rèn)為不錯(cuò)的，僅供參考！