layui laypage组件常见用法总结
前端  /  管理员 发布于 4年前   324
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 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" 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>
更多layui知识请关注layui使用教程栏目。
以上就是layui laypage组件常见用法总结的详细内容,更多请关注其它相关文章!
122 在
学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号