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分页的使用。希望本文能够对读者有所启发，并帮助开发人员更快速、简便地实现分页展示的需求。