Layui 分頁完整示例

Layui 分頁是一種功能強大且易於實現的數據分頁組件，能夠高效地將內容分頁展示。本文將詳細介紹如何使用layui分頁完整示例。

一、基本介紹

layui分頁組件基於jQuery的封裝，用於解決大數據量的分頁展示問題。通過簡單易懂的API提供，使用簡便，提供了豐富的設定項，根據展示需要可自由組合。

在通過layui進行前端開發時，我們可以使用layui分頁組件來快速實現數據分頁展示。該組件包含多種功能，如傳統分頁、滾動載入、前後台自動分頁等，使得我們在數據展示的時候更加靈活方便。

二、示例演示

下面附上一個layui分頁完整示例，代碼如下：

//HTML
<div class="demoTable">
  <table class="layui-table">
    <thead>
      <tr><th>ID</th><th>用戶名</th><th>狀態</th></tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>test1</td>
        <td>啟用</td>
      </tr>
      <tr>
        <td>2</td>
        <td>test2</td>
        <td>禁用</td>
      </tr>
      <tr>
        <td>3</td>
        <td>test3</td>
        <td>啟用</td>
      </tr>
    </tbody>
  </table>
</div>

<div id="demo0"></div>
<div class="layui-box layui-laypage layui-laypage-default">
  <div class="pagwrap">
    <div id="demo1"></div>
    <div class="layui-laypage-curr">
      <em class="layui-laypage-em">1</em>
      <em>2</em>
      <em>3</em>
      <em>4</em>
      <em>5</em>
      <em>6</em>
      <em>7</em>
      <em>8</em>
      <em>9</em>
      <em>10</em>
    </div>
    <div id="demo2"></div>
  </div>
  <div class="pagwrap">
    <div id="demo3"></div>
  </div>
</div>

//JS
layui.use('laypage', function(){
  var laypage = layui.laypage;

  //完整分頁功能
  laypage.render({
    elem: 'demo0'
    ,count: 100
  });

  //自定義信息樣式和SEO信息
  laypage.render({
    elem: 'demo1'
    ,count: 100
    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
    ,jump: function(obj){
      console.log(obj)
    }
  });

  //滾動載入
  laypage.render({
    elem: 'demo2'
    ,count: 100
    ,scrollbar: true
    ,theme: '#FF5722'
    ,limit: 6
    ,jump: function(obj){
      console.log(obj.curr); //得到當前頁，以便向服務端請求對應數據
      var html = '',i;
      for(i=0;i<obj.limit;i++){
        html += '<li><i class="layui-icon"></i>我的標題</li>';
      }
      $('#content').html(html);
    }
  });

  //切換分頁項前回調，返回一個Boolean，若返回false則不切換
  laypage.render({
    elem: 'demo3'
    ,count: 100
    ,limit: 10
    ,jump: function(obj, first){
      if(!first){
        layer.msg('第'+ obj.curr +'頁', {offset: 'b'});
      }
    }
    ,prev: '<em class="layui-icon"></em>'
    ,next: '<em class="layui-icon"></em>'
  });
});

在這個示例中，利用laypage渲染完整分頁，用戶可以通過點擊底部的數字、上一頁或下一頁等控制項來進行分頁操作，渲染出的數據即為表格中的數據。

三、代碼解析

上述示例中的HTML代碼中，通過div包裹一個表格，表格中含有thead和tbody，分別表示表格的表頭和表體。通過div包裹layui-box和多個pagwrap，其中的demo0和demo3沒有包裹在pagwrap中，說明這兩個分頁的樣式不同於其他分頁。

在JS代碼中，首先引入layui的laypage模塊，然後定義一個對象laypage。

接著，定義了一個完整分頁的方法laypage.render，其中elem為要進行分頁的html元素，count為總頁數。通過調用該方法，便可以實現一個基本的完整分頁功能。

laypage.render({
  elem: 'demo0'
  ,count: 100
});

接下來定義了一個自定義信息樣式和SEO信息的分頁，通過layout屬性進行自定義分頁信息，其中layout的每個值含義如下：

• count：總記錄數
• prev：上一頁
• page：當前頁
• next：下一頁
• limit：每頁記錄數
• refresh：刷新
• skip：跳頁

通過在jump屬性中定義回調函數，即可在用戶翻頁時進行相應的操作。

laypage.render({
  elem: 'demo1'
  ,count: 100
  ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
  ,jump: function(obj){
    console.log(obj)
  }
});

此外，laypage還有很多方法，如滾動載入、切換分頁項前回調等。其中，通過scrollbar屬性可以實現滾動載入的效果。

laypage.render({
  elem: 'demo2'
  ,count: 100
  ,scrollbar: true
  ,theme: '#FF5722'
  ,limit: 6
  ,jump: function(obj){
    console.log(obj.curr); //得到當前頁，以便向服務端請求對應數據
    var html = '',i;
    for(i=0;i<obj.limit;i++){
      html += '<li><i class="layui-icon"></i>我的標題</li>';
    }
    $('#content').html(html);
  }
});

最後，我們還可以在laypage的render方法中使用prev和next屬性來更改默認的上一頁和下一頁顯示樣式，如：

laypage.render({
  elem: 'demo3'
  ,count: 100
  ,limit: 10
  ,jump: function(obj, first){
    if(!first){
      layer.msg('第'+ obj.curr +'頁', {offset: 'b'});
    }
  }
  ,prev: '<em class="layui-icon"></em>'
  ,next: '<em class="layui-icon"></em>'
});

四、總結

在本文中，我們詳細介紹了layui分頁組件的使用方法，講解了layui分頁完整示例的代碼和實現原理，使讀者能夠更加深入地了解layui分頁的使用。希望本文能夠對讀者有所啟發，並幫助開發人員更快速、簡便地實現分頁展示的需求。