分頁模塊文檔 - layui.laypage

                    layPage 致力于提供極致的分頁邏輯,既可輕松勝任異步分頁,也可作為頁面刷新式分頁。自 layui 2.0 開始,無論是從核心代碼還是API設計,layPage 都完成了一次蛻變。清爽的UI、靈活的排版,極簡的調用方式,這一切的優質元素,都將毫無違和感地鑲嵌在你的頁面之中。
                    模塊加載名稱:laypage
                    快速使用

                    laypage 的使用非常簡單,指向一個用于存放分頁的容器,通過服務端得到一些初始值,即可完成分頁渲染:

                    <!DOCTYPE html>
                    <html>
                    <head>
                      <meta charset="utf-8">
                      <title>layPage快速使用</title>
                      <link rel="stylesheet" href="/static/build/layui.css" media="all">
                    </head>
                    <body>
                     
                    <div id="test1"></div>
                     
                    <script src="/static/build/layui.js"></script>
                    <script>
                    layui.use('laypage', function(){
                      var laypage = layui.laypage;
                      
                      //執行一個laypage實例
                      laypage.render({
                        elem: 'test1' //注意,這里的 test1 是 ID,不用加 # 號
                        ,count: 50 //數據總數,從服務端得到
                      });
                    });
                    </script>
                    </body>
                    </html>
                          
                    基礎參數選項

                    通過核心方法:laypage.render(options) 來設置基礎參數。由于使用非常簡單,本篇直接羅列核心接口的參數選項

                    參數選項 說明 類型 默認值
                    elem 指向存放分頁的容器,值可以是容器ID、DOM對象。如:
                    1. elem: 'id' 注意:這里不能加 # 號
                    2. elem: document.getElementById('id')
                    String/Object -
                    count 數據總數。一般通過服務端得到 Number -
                    limit 每頁顯示的條數。laypage將會借助 count 和 limit 計算出分頁數。 Number 10
                    limits 每頁條數的選擇項。如果 layout 參數開啟了 limit,則會出現每頁條數的select選擇框 Array [10, 20, 30, 40, 50]
                    curr 起始頁。一般用于刷新類型的跳頁以及HASH跳頁。如:
                    //開啟location.hash的記錄
                    laypage.render({
                      elem: 'test1'
                      ,count: 500
                      ,curr: location.hash.replace('#!fenye=', '') //獲取起始頁
                      ,hash: 'fenye' //自定義hash值
                    });          
                                  
                    Number 1
                    groups 連續出現的頁碼個數 Number 5
                    prev 自定義“上一頁”的內容,支持傳入普通文本和HTML String 上一頁
                    next 自定義“下一頁”的內容,同上 String 下一頁
                    first 自定義“首頁”的內容,同上 String 1
                    last 自定義“尾頁”的內容,同上 String 總頁數值
                    layout 自定義排版。可選值有:count(總條目輸區域)、prev(上一頁區域)、page(分頁區域)、next(下一頁區域)、limit(條目選項區域)、refresh(頁面刷新區域。注意:layui 2.3.0 新增) 、skip(快捷跳頁區域) Array ['prev', 'page', 'next']
                    theme 自定義主題。支持傳入:顏色值,或任意普通字符。如:
                    1. theme: '#c00'
                    2. theme: 'xxx' //將會生成 class="layui-laypage-xxx" 的CSS類,以便自定義主題
                    String -
                    hash 開啟location.hash,并自定義 hash 值。如果開啟,在觸發分頁時,會自動對url追加:#!hash值={curr} 利用這個,可以在頁面載入時就定位到指定頁 String/Boolean false
                    jump - 切換分頁的回調

                    當分頁被切換時觸發,函數返回兩個參數:obj(當前分頁的所有選項值)、first(是否首次,一般用于初始加載的判斷)

                    laypage.render({
                      elem: 'test1'
                      ,count: 70 //數據總數,從服務端得到
                      ,jump: function(obj, first){
                        //obj包含了當前分頁的所有參數,比如:
                        console.log(obj.curr); //得到當前頁,以便向服務端請求對應頁的數據。
                        console.log(obj.limit); //得到每頁顯示的條數
                        
                        //首次不執行
                        if(!first){
                          //do something
                        }
                      }
                    });
                          
                    結束

                    正如你看到對的,laypage 只負責分頁本身的邏輯,具體的數據請求與渲染需要另外去完成。laypage 不僅能應用在一般的異步分頁上,還可直接對一段已知數據進行分頁展現,更可以取代傳統的超鏈接分頁,如果你無需考慮SEO的話(因為 laypage 的分頁是JS動態生成的)。

                    layui - 用心與你溝通

                    亚洲图色