当前位置: 首页 >>前端开发 >>LayUi教程 >>LayUi分页教程

LayUi分页教程

时间:2021/10/31 8:30:00 【admin】

layPage 致力于提供极致的分页逻辑,既可轻松胜任异步分页,也可作为页面刷新式分页。自 layui 2.0 开始,无论是从核心代码还是API设计,layPage 都完成了一次蜕变。清爽的 UI、灵活的排版,极简的调用方式,这一切的优质元素,都将毫无违和感地镶嵌在你的页面之中。…

layPage 致力于提供极致的分页逻辑,既可轻松胜任异步分页,也可作为页面刷新式分页。自 layui 2.0 开始,无论是从核心代码还是API设计,layPage 都完成了一次蜕变。清爽的 UI、灵活的排版,极简的调用方式,这一切的优质元素,都将毫无违和感地镶嵌在你的页面之中。

模块加载名称:laypage

快速使用

laypage 的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染:


在 layui 模块中使用code

<!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) 来设置基础参数。由于使用非常简单,本篇直接罗列核心接口的参数选项

image.png

image.png

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 不仅能应用在一般的异步分页上,还可直接对一段已知数据进行分页展现。其中大家使用最多的 table 组件就是采用的 laypage 作为分页依赖。


扩充阅读

相关文章

CopyRight:2007-2018 编程语言吧 备案ICP:湘ICP备09009000号-15 http://www.yuyanba.com

分享按钮