layui(三)——laypage組件常見用法總結

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>

 

注:這是為了個人查找方便整理的文檔，並沒有總結完全，查看更多可訪問官網http://www.layui.com/doc