如何使用layui的分頁功能

這篇文章主要為大家展示了“如何使用layui的分頁功能”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何使用layui的分頁功能”這篇文章吧。

layui是一個(gè)非常實(shí)用的前端開發(fā)庫，利用它我們可以方便，簡單的創(chuàng)建各種美觀的前端UI

方法/步驟

首先我們需要引入lay對應(yīng)的腳本文件和樣式文件。

在Html里，我們只需要?jiǎng)?chuàng)建一個(gè)空的div來生成分頁組件就行了，為這個(gè)div提供一個(gè)id。

在js腳本代碼上，我們先生成一個(gè)laypage的分頁組件實(shí)例對象。

然后調(diào)用這個(gè)對象的render方法來渲染出分頁的各個(gè)元素。

render方法里，我們傳入一個(gè)對象，elem就是div的id。

count是用來指示分頁的對象一共有多少條數(shù)據(jù)。

運(yùn)行這樣的代碼，我們就可以看到這個(gè)渲染出來的分頁了，很簡單的代碼，就得到了一個(gè)漂亮的分頁了。

從上面的數(shù)據(jù)我們可以看到，默認(rèn)情況下是一頁包含10條數(shù)據(jù)的。

當(dāng)然這個(gè)我們也是可以配置的，提供limit參數(shù)就行了，我們這里設(shè)置為4。

重新刷新頁面，可以看到，20條數(shù)據(jù)，每頁4行數(shù)據(jù)，可以看到現(xiàn)在就共分為5頁了。

分頁控件里，一個(gè)很重要的功能是需要交互，就是說點(diǎn)擊了某一頁后，需要顯示對應(yīng)頁的數(shù)據(jù)。

因此組件提供了一個(gè)jump的方法來交互，這個(gè)方法里，會(huì)傳過來一個(gè)參數(shù)obj，這個(gè)obj我們可以得到一些常用的數(shù)據(jù)，比如obj.cur，得到的是當(dāng)前的頁碼。

obj.limit可以得到每一頁包含的數(shù)據(jù)數(shù)目。

以上是“如何使用layui的分頁功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！