温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

layui中laypage组件如何使用

发布时间:2021-08-12 11:29:49 来源:亿速云 阅读:177 作者:Leah 栏目:开发技术

这篇文章给大家介绍layui中laypage组件如何使用,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

一、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><h3 id="newsType">新闻分类1</h3> <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中laypage组件如何使用就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI