layui分页怎么用-猿码集

1. 简介

layui是一款轻量级的前端UI框架，其中的分页功能可以帮助我们在前端实现数据分页展示、翻页等功能。本文主要介绍如何使用layui框架的分页模块。

2. 安装

在使用之前，我们需要先引入layui的相关文件。可以通过以下两种方式进行引入：

2.1 引入CDN文件

将以下代码加入到HTML文件的标签中即可：

<link rel="stylesheet" href="//res.layui.com/layui/dist/layui/css/layui.css" /> 
<script src="//res.layui.com/layui/dist/layui.js"></script>

2.2 npm安装

通过npm安装layui：

npm install layui

然后引入css和js文件：

<link rel="stylesheet" href="node_modules/layui-src/dist/css/layui.css" /> 
<script src="node_modules/layui-src/dist/layui.js"></script>

3. 使用

在引入layui相关文件后，我们就可以使用它的分页模块了。

3.1 基础分页

layui提供了一个非常简单的分页组件，只需要定义好容器和后端API地址即可。我们可以通过以下代码实现一个基本的分页：

<div id="page"></div>
<script>
layui.use('laypage', function(){
  var laypage = layui.laypage;
  
  //执行一个laypage实例
  laypage.render({
    elem: 'page', //注意，这里的 test1 是 ID，不用加 # 号
    count: 50, //数据总数，从服务端得到
    limit: 10,//每页显示条数
    jump: function(obj, first){
      //分页回调函数
      if(!first){
        //如果不是第一次页面加载，则执行下面的代码
        //obj包含当前分页的所有参数，如下：
        console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
        console.log(obj.limit); //得到每页显示的条数。
      }
    }
  });
});
</script>

上述代码中的 #page 即为分页组件的容器，laypage.render() 函数的参数 obj 包含当前分页的所有参数，其中 obj.curr 代表当前页码，obj.limit 代表每页显示的数据条数。

3.2 自定义样式

layui分页组件提供了丰富的自定义样式功能，可以根据需要自定义分页导航按钮的样式和文本。下面的代码演示如何定义分页导航按钮的样式、文本和当前页码的样式：


<style>
.layui-laypage em{background:none;}//去掉默认分页按钮的背景
.layui-laypage .layui-laypage-prev em{background-position:-54px -48px;}//定义前一页按钮的样式
.layui-laypage .layui-laypage-next em{background-position:-72px -48px;}//定义后一页按钮的样式
.layui-laypage .layui-laypage-curr em{background-color:#1E9FFF;}//定义当前页码的样式
.layui-laypage .layui-laypage-count{margin-left:20px;font-size:12px;}//定义每页显示数据总数的区域的样式
.layui-laypage .layui-laypage-skip{margin-left:20px;font-size:12px;}//定义跳转页面输入框的样式
</style>
<div id="page"></div>
<script>
layui.use('laypage', function(){
    var laypage = layui.laypage;
 
    laypage.render({
        elem: 'page', // 分页容器
        count: 60, // 数据总数
        limit: 10, // 每页显示条数
        curr: 1, // 当前页码
        groups: 3, // 连续出现的页码个数
        theme: '#4296ec', // 自定义样式
        jump: function(obj, first){
            //obj包含当前分页的所有参数，如下：
            console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            console.log(obj.limit); //得到每页显示的条数。
        }
    });
});
</script>

3.3 数据自定义

除了可以自定义样式外，layui分页组件还可以根据自己的需求自定义数据。比如，我们可以通过 ajax 调用服务器接口获取数据，如下：


<div id="demo"></div>
<script>
layui.use('laypage', function(){
    var laypage = layui.laypage;
 
    laypage.render({
        elem: 'demo',
        curr: location.hash.replace('#!page=', ''), //获取hash值为fenye的当前页
        hash: 'fenye',
        limit: 10,
        count: 50,
        jump: function(obj, first){
            $.getJSON('你的后端接口', {
                page: obj.curr,
                rows: obj.limit
            }, function(res){
                // 数据处理
                $('#data').empty();
                $.each(res.rows, function(key, data){
                    $('#data').append(data.content);
                });
            });
 
            // 首次不执行
            if(!first){
                $(window).scrollTop(0);
            }
        }
    });
});
</script>

上述代码中，我们通过 $.getJSON 进行 ajax 调用，将当前页和每页显示的行数传递给后端接口，并在回调函数中对返回的数据进行处理。在数据处理完成后，我们可以将其添加到指定的 DOM 元素中进行渲染。

4. 注意事项

使用layui分页组件时，需要注意以下几点：

必须引入layui的相关文件。

需要定义分页容器及后端接口地址。

可以自定义分页导航按钮的样式和文本。

注意分页组件容器的 ID 必须保证唯一性。

5. 总结

本篇文章主要介绍了layui分页的使用方法，通过上述学习，相信读者已经能够轻松应用layui分页功能，实现前端数据的分页展示、翻页等功能了。

layui分页怎么用