Layui Laypage 컴포넌트의 일반적인 사용법 요약

laypage는 사용이 매우 간단합니다. 페이징을 저장하는 컨테이너를 가리키고 서버에서 일부 초기 값을 가져와 페이징 렌더링을 완료합니다. 핵심 메소드: 기본 매개변수를 설정하는laypage.render(options)

1. 일반적으로 사용되는 레이페이지 기본 매개변수

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  
                    }
                }
            })
        });

2. 사용법

#🎜 🎜#layui의 테이블에는 레이페이지가 포함되어 있습니다. 여기서는 주로 백그라운드 페이징 및 프런트엔드 로딩 목록(테이블의 목록 아님)의 예를 작성하며, 구체적으로 분류 표시줄을 클릭합니다. 해당 뉴스 목록을 표시합니다.

<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="新闻分类">新闻分类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([&#39;laypage&#39;], function () {
        var laypage = layui.laypage
            , layer = layui.layer;

//---------------------------点击侧边类型，加载新闻列表
        $(&#39;#newsTypeList li&#39;).click(function () {
            var typeId = $(this).attr("data-typeId");
            $.post(&#39;/News/GetNewsByPage&#39;, { 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: &#39;demo7&#39;
                , count: count
                , theme: &#39;#4A90E2&#39;
                , layout: [&#39;prev&#39;, &#39;page&#39;, &#39;next&#39;]
                , limit: 3
                , jump: function (obj, first) {
                    if (!first) {
                        $.post(&#39;/News/GetNewsByPage&#39;
　　　　　　　　　　　　　　　　, { 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 += (&#39;<li>${item.Title}</li>&#39;);
            });
            document.getElementById(&#39;newsList&#39;).innerHTML = strHtml;
        }
//--------------------------------改变样式
        function setStyle(typeId) {
            $(&#39;ul.newsTypeList li&#39;).removeClass(&#39;hover&#39;);
            $(&#39;ul.newsTypeList li[data-typeId=&#39; + typeId + &#39;]&#39;).addClass(&#39;hover&#39;);
            $(&#39;#newsType&#39;).text($(&#39;ul#newsTypeList li[data-typeId=&#39; + typeId + &#39;]&#39;).text())
        }
    });
</script>

layui에 대한 더 많은 지식은

layui 사용법 튜토리얼 컬럼을 주목해주세요.

위 내용은 Layui Laypage 컴포넌트의 일반적인 사용법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!