layui的分页怎么实现-猿码集

初识layui分页

layui是一个优秀的前端UI框架，它采用了模块化的设计方式，功能强大、简单易用。分页插件是layui常用的功能之一，它可以将分页的繁琐工作简化为几行代码。下面我们来学习一下layui分页的使用方法。

安装layui

要使用layui分页，首先需要安装layui。我们可以通过在HTML文件中引入layui的CSS和JavaScript文件来安装：


<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.3.0/css/layui.css">
</head>
<body>
  <script src="https://cdn.staticfile.org/layui/2.3.0/layui.js"></script>
</body>
</html>

使用layui分页

步骤一：引入分页组件所需的CSS文件

要使用layui分页，需要在HTML文件中引入分页组件所需的CSS文件。


<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.3.0/css/layui.css">
</head>
<body>
  <div id="page"></div>
  <script src="https://cdn.staticfile.org/layui/2.3.0/layui.js"></script>
  <script>
    layui.use('laypage', function(){
      var laypage = layui.laypage;
    });
  </script>
</body>
</html>

步骤二：设置分页组件的参数

要使用layui分页，还需要设置分页组件的参数。参数需要传递一个JavaScript对象，其中包含两个参数：

elem：要进行分页的容器元素的ID或者DOM对象。

count：总记录数。

下面是一个基本的分页组件设置示例：


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

上述代码定义了一个ID为page的DIV元素作为要进行分页的容器，总记录数为100。其中layout参数指定了分页组件的布局，jump参数为分页组件的回调函数，当用户点击分页组件时，会自动调用该函数，给函数传递一个对象参数，该参数包含当前页码等信息。

layui分页的常用参数

elem参数

elem参数指定要进行分页的容器元素的ID或者DOM对象。例如设置分页容器元素ID为page：


laypage.render({
  elem: 'page',
  count: 100,
  //其它参数
});

count参数

count参数指定总记录数。


laypage.render({
  elem: 'page',
  count: 100,
  //其它参数
});

limit参数

limit参数指定每页显示的记录数，默认为10。


laypage.render({
  elem: 'page',
  count: 100,
  limit: 20,
  //其它参数
});

curr参数

curr参数指定默认选中的页码。


laypage.render({
  elem: 'page',
  count: 100,
  curr: 2,
  //其它参数
});

layout参数

layout参数指定分页组件的布局，包含的参数有：

count：总记录数；

prev：上一页；

page：页码；

next：下一页；

limit：每页显示条数选择框；

skip：跳转到指定页数的输入框；

下面是一个完整的layout参数设置示例：


laypage.render({
  elem: 'page',
  count: 100,
  layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
  //其它参数
});

limits参数

limits参数指定每页显示条数的选择项，默认为[10, 20, 30, 40, 50, 60, 70, 80, 90]。


laypage.render({
  elem: 'page',
  count: 100,
  limits: [5, 10, 20, 30],
  //其它参数
});

groups参数

groups参数指定连续分页显示的页码个数。


laypage.render({
  elem: 'page',
  count: 100,
  groups: 5,
  //其它参数
});

prev参数和next参数

prev参数和next参数指定分页组件中“上一页”和“下一页”的文字。


laypage.render({
  elem: 'page',
  count: 100,
  prev: '上一页',
  next: '下一页',
  //其它参数
});

first参数和last参数

first参数和last参数指定分页组件中“第一页”和“最后一页”的文字。


laypage.render({
  elem: 'page',
  count: 100,
  first: '首页',
  last: '尾页',
  //其它参数
});

layui分页的回调函数

分页组件的jump参数是一个回调函数，当用户点击分页组件时，会自动调用该函数，给函数传递一个对象参数，该参数包含当前页码等信息。例如下面的代码获取当前页码并打印到控制台：


laypage.render({
  elem: 'page',
  count: 100,
  jump: function(obj){
    console.log(obj.curr); //得到当前页码
  }
});

回调函数中obj参数包含以下字段：

curr：得到当前页码；

limit：得到每页显示的条数；

pages：得到总页数；

count：得到总条数；

prev：得到上一页的页码；

next：得到下一页的页码；

例如下面的代码获取当前页码、每页显示的条数以及总页数，并将它们打印到控制台：


laypage.render({
  elem: 'page',
  count: 100,
  jump: function(obj){
    console.log(obj.curr); //得到当前页码
    console.log(obj.limit); //得到每页显示的条数
    console.log(obj.pages); //得到总页数
  }
});

完整示例

下面是一个完整的layui分页示例，包含所有常用参数设置和回调函数的使用：


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>layui分页示例</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.3.0/css/layui.css">
</head>
<body>
  <div id="page"></div>
  <script src="https://cdn.staticfile.org/layui/2.3.0/layui.js"></script>
  <script>
    layui.use('laypage', function(){
      var laypage = layui.laypage;
      laypage.render({
        elem: 'page',
        count: 100,
        limit: 20,
        curr: 1,
        groups: 5,
        layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
        limits: [5, 10, 20, 30],
        prev: '上一页',
        next: '下一页',
        first: '首页',
        last: '尾页',
        jump: function(obj){
          console.log(obj.curr); //得到当前页码
          console.log(obj.limit); //得到每页显示的条数
          console.log(obj.pages); //得到总页数
        }
      });
    });
  </script>
</body>
</html>

运行上述代码，就可以看到一个带有分页功能的漂亮页面了。

总结

通过本文的学习，我们可以看到layui分页插件的使用方法和常用参数的设置，还有回调函数的使用。如果您想要实现分页功能，可以参考本文的方法，利用layui分页插件快速实现分页功能。同样，如果您的项目中需要其它UI组件的支持，layui框架提供了更多的插件，并且文档十分详细易懂，可以供您继续学习和使用。

layui的分页怎么实现