<del id="kmqwi"><b id="kmqwi"></b></del>
      <track id="kmqwi"><del id="kmqwi"></del></track>
    1. <table id="kmqwi"></table>
      <acronym id="kmqwi"><strong id="kmqwi"></strong></acronym>
    2. 
      
      <p id="kmqwi"><strong id="kmqwi"></strong></p>
    3. 分頁模塊文檔 - 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 - 用心與你溝通

      亚洲图色