layui学习笔记——分页

最新推荐文章于 2025-09-12 14:04:02 发布

weixin_33797791

最新推荐文章于 2025-09-12 14:04:02 发布

阅读量93

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/2427561/blog/1536481

本文介绍如何使用LayUI的laypage分页组件快速实现页面分页功能，并展示了基本的使用方法及参数配置。同时，还介绍了如何设置分页切换时的回调函数以获取当前页数。

2019独角兽企业重金招聘Python工程师标准>>>

1、快速使用

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

 < div id = "test1" >  <  / div >
     < script >
    layui.use('laypage', function ()
    {
        var laypage = layui.laypage;
        //执行一个laypage实例
        laypage.render(
        {
            elem : 'test1' //注意，这里的 test1 是 ID，不用加 # 号
        , count : 50 //数据总数，从服务端得到
        });
    });
<  / script >

2、基础参数选项

通过核心方法：laypage.render(options) 来设置基础参数

3、切换分页的回调jump

当分页被切换时触发：

laypage.render({
  elem: 'test1'
  ,count: 70 //数据总数，从服务端得到
  ,jump: function(obj, first){
    //obj包含了当前分页的所有参数，比如：
    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
    console.log(obj.limit); //得到每页显示的条数   
    //首次不执行
    if(!first){
      //do something
    }
  }
});

转载于:https://my.oschina.net/u/2427561/blog/1536481