php laypage,layui laypage组件常见用法总结

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组件常见用法总结的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。