hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 后端开发 - 正文 看Cosplay古风插画小姐姐,合集图集打包下载:炫龙网 · 炫龙图库

layui laypage组件罕见用法总结_WEB前端开发

2019-12-01后端开发ki4网18°c
A+ A-

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组件罕见用法总结的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
layui laypage组件罕见用法总结_WEB前端开发

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>