在前端工作中，框架作為快速搭建項(xiàng)目的工具重要不言而喻。各種框架都有這其各自不同的適合場(chǎng)景像是bootstrap(有點(diǎn)過時(shí))適合響應(yīng)式項(xiàng)目，vue適合做雙向數(shù)據(jù)綁定，react更適合做交互，這里文匯軟件小編就來(lái)給大家介紹一種適合做后臺(tái)頁(yè)面開發(fā)的框架——layui，今天我們先介紹分頁(yè)。

分頁(yè)，作為我們前端經(jīng)常接觸的組件有過一定經(jīng)驗(yàn)的前端都不會(huì)陌生，而作為前端我們更加注重的是點(diǎn)擊時(shí)如何進(jìn)行數(shù)據(jù)交換。

首先我們可以先去官方文檔中查看分頁(yè)如何使用

然后它內(nèi)部的代碼如下圖

最上部的div為分頁(yè)展示的內(nèi)容，ul為分頁(yè)的頁(yè)碼。

在使用分頁(yè)前需要先調(diào)用layui的laypage模塊，nums為設(shè)置好的每頁(yè)顯示數(shù)量然后在定義分頁(yè)的render函數(shù)，內(nèi)部的data為后臺(tái)所傳遞的數(shù)據(jù)，curr為當(dāng)前頁(yè)面的數(shù)據(jù)，下面的方法為將當(dāng)前頁(yè)碼數(shù)算出當(dāng)前頁(yè)面數(shù)據(jù)并在總數(shù)據(jù)中使用splice方法提取出來(lái)并為其添加li標(biāo)簽進(jìn)行渲染

最后將他掛載到對(duì)應(yīng)展示的容器上，count為數(shù)據(jù)的總數(shù)值從服務(wù)端獲得，jump函數(shù)為將render的頁(yè)碼函數(shù)掛載到頁(yè)碼容器上

最后服務(wù)端返回的數(shù)據(jù)格式如上圖。

以上就是小編分享的了，如果喜歡的話就來(lái)文匯軟件關(guān)注小編吧