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中的列表)的栗子,具体为点击分类栏,主体部分显示对应的新闻列表。
<div class="category">
<ul id="newsTypeList">
<li data-typeId="1">新闻分类1</li>
<li data-typeId="2">新闻分类2</li>
<li data-typeId="3">新闻分类3</li>
<li data-typeId="4">新闻分类4</li>
</ul>
</div>
<h2 id="newsType">新闻分类1</h2>
<div class="list_box">
<ul class="list_ul"></ul>
<div style="text-align:center"></div>
</div>
<script>
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 = ('<li>${item.Title}</li>');
});
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())
}
});
</script>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfgheh
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01