layui（三）——laypage组件常见⽤法总结
laypage 的使⽤⾮常简单，指向⼀个⽤于存放分页的容器，通过服务端得到⼀些初始值，即可完成分页渲染。核⼼⽅
法： der(options)  来设置基础参数。
⼀、laypage的常⽤基础参数
layui.use(['laypage'], function () {
laypage = layui.laypage
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 class="hover" id="hyzxNews" 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 id="newsList" class="list_ul"></ul>
  <div id="demo7" ></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)
unt, typeId)//切换分类时候，调⽤页码，重新渲染
});
}).eq(0).click();
//--------------------------------分页组件渲染
function pages(count, typeId) {
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) {
layui框架怎么用
strHtml += ('<li>${item.Title}</li>');
});
}
//--------------------------------改变样式
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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。