初中生怎么做网站,电商货源网站,目录网站做外链,手机app安装下载laypage 的使用非常简单#xff0c;指向一个用于存放分页的容器#xff0c;通过服务端得到一些初始值#xff0c;即可完成分页渲染。核心方法#xff1a; laypage.render(options) 来设置基础参数。一、laypage的常用基础参数layui.use([laypage], function () {laypage l…laypage 的使用非常简单指向一个用于存放分页的容器通过服务端得到一些初始值即可完成分页渲染。核心方法 laypage.render(options) 来设置基础参数。一、laypage的常用基础参数layui.use([laypage], function () {laypage layui.laypagelaypage.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 somethingif (!first) {//非首次加载 do something}}})});二、使用方式在layui中的table中包含了laypage这里就不再说明laytable中的分页用法主要写一个后台分页前端加载列表(非table中的列表)的栗子具体为点击分类栏主体部分显示对应的新闻列表。新闻分类1新闻分类2新闻分类3新闻分类4新闻分类1layui.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使用教程栏目。
