laypage 的使用非常簡單，指向一個用于存放分頁的容器，通過服務端得到一些初始值，即可完成分頁渲染。核心方法： laypage.render(options) 來設置基礎參數。

一、laypage的常用基礎參數layui.use(['laypage'], function () {

laypage = layui.laypage

laypage.render({

elem: 'pageTest' //這是元素的id，不能寫成"#pageTest"

, count: data.length //數據總數

, limit: 10 //每頁顯示條數

, limits: [10, 20, 30]

, curr: 1 //起始頁

, groups: 5 //連續頁碼個數

, prev: '上一頁' //上一頁文本

, netx: '下一頁' //下一頁文本

, first: 1 //首頁文本

, last: 100 //尾頁文本

, layout: ['prev', 'page', 'next','limit','refresh','skip']

//跳轉頁碼時調用

, jump: function (obj, first) { //obj為當前頁的屬性和方法，第一次加載first為true

// do something

if (!first) {

//非首次加載 do something

}

}

})

});

二、使用方式

在layui中的table中包含了laypage，這里就不再說明laytable中的分頁用法，主要寫一個后臺分頁，前端加載列表(非table中的列表)的栗子，具體為點擊分類欄，主體部分顯示對應的新聞列表。

• 新聞分類1
• 新聞分類2
• 新聞分類3
• 新聞分類4

新聞分類1

layui.use(['laypage'], function () {

var laypage = layui.laypage

, layer = layui.layer;

//---------------------------點擊側邊類型，加載新聞列表

$('#newsTypeList li').click(function () {

var typeId = $(this).attr("data-typeId");

$.post('/News/GetNewsByPage', { page: 1, limit: 3, typeId: typeId }, function (result) {

res = result.data;

setHtml(res);

setStyle(typeId)

pages(result.count, typeId)//切換分類時候，調用頁碼，重新渲染

});

}).eq(0).click();

//--------------------------------分頁組件渲染

function pages(count, typeId) {

laypage.render({

elem: 'demo7'

, count: count

, theme: '#4A90E2'

, layout: ['prev', 'page', 'next']

, limit: 3

, jump: function (obj, first) {

if (!first) {

$.post('/News/GetNewsByPage'

, { page: obj.curr, limit: obj.limit, typeId: typeId }

, function (result) {

res = result.data;

setHtml(res);

});

}

}

})

}

//--------------------------------寫入后臺內容

function setHtml(data) {

var strHtml = "";

$.each(data, function (index, item) {

strHtml += ('

${item.Title}');

});

document.getElementById('newsList').innerHTML = strHtml;

}

//--------------------------------改變樣式

function setStyle(typeId) {

$('ul.newsTypeList li').removeClass('hover');

$('ul.newsTypeList li[data-typeId=' + typeId + ']').addClass('hover');

$('#newsType').text($('ul#newsTypeList li[data-typeId=' + typeId + ']').text())

}

});

更多layui知識請關注layui使用教程欄目。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的php laypage,layui laypage组件常见用法总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。