這篇文章運(yùn)用簡(jiǎn)單易懂的例子給大家介紹LayUI實(shí)現(xiàn)前端分頁(yè)功能的方法,代碼非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對(duì)大家能有所幫助。
我們提供的服務(wù)有:網(wǎng)站建設(shè)、成都做網(wǎng)站、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、云霄ssl等。為上1000家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù),是有科學(xué)管理、有技術(shù)的云霄網(wǎng)站制作公司
Layui 是一款采用自身模塊規(guī)范編寫的國(guó)產(chǎn)前端UI框架,遵循原生HTML/CSS/JS的書寫與組織形式,門檻極低,拿來即用。內(nèi)置了一些常用元素和組件的UI框架。
下載地址為http://www.layui.com/,下載后引入項(xiàng)目中。
二、LayPage參數(shù)介紹
aypage是內(nèi)置封裝好的一個(gè)對(duì)象,在進(jìn)行分頁(yè)的時(shí)候直接調(diào)用即可,這里主要有以下幾個(gè)參數(shù),用于配置laypage的鍵值對(duì)集合:
鍵 | 默認(rèn)值 | 類型 | 描述 |
cont | 必填 | String/Object | 容器。值可以傳入元素id或原生DOM或jquery對(duì)象 |
pages | 必填 | Number | 分頁(yè)數(shù) |
curr | 1 | Number | 當(dāng)前頁(yè)。 |
groups | 5 | Number | 連續(xù)分頁(yè)數(shù)。 |
skin | default | String | 控制分頁(yè)皮膚 |
first | 1 | Number/String/Boolean | 用于控制首頁(yè)。first: false,則表示不顯示首頁(yè)項(xiàng) |
last | 總頁(yè)數(shù)值 | Number/String/Boolean | 用于控制尾頁(yè)。last: false,則表示不顯示尾頁(yè)項(xiàng) |
prev | 上一頁(yè) | String/Boolean | 用于控制上一頁(yè)。若不顯示,設(shè)置false即可 |
next | 下一頁(yè) | String/Boolean | 用于控制下一頁(yè)。若不顯示,設(shè)置false即可 |
jump | 核心參數(shù) | Function | 觸發(fā)分頁(yè)后的回調(diào),函數(shù)返回兩個(gè)參數(shù)。 |
分頁(yè)效果如下:
看完這篇文章,你們學(xué)會(huì)LayUI實(shí)現(xiàn)前端分頁(yè)功能的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀。