Layui快速入门之第十四节分页

最新推荐文章于 2024-07-05 23:55:49 发布

渊婉

最新推荐文章于 2024-07-05 23:55:49 发布

阅读量2.6k

点赞数 3

分类专栏： Layui 文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/qq_61313896/article/details/132966386

版权

一：基本用法

分页组件 laypage 提供了前端的分页逻辑，使得我们可以很灵活处理不同量级的数据，从而提升渲染效率


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>分页</title>
  <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all">
</head>
<body>
<div id="test"></div> 
<script src="//res.layui.com/layui/dist/layui.js"></script>
<script>
layui.use('laypage', function(){
  var laypage = layui.laypage;
  
  //执行一个laypage实例
  laypage.render({
    elem: 'test' //注意，这里的 test 是上面的 ID，不用加 # 号
    ,count: 100 //数据总数，从服务端得到
    ,limit: 10 //默认显示10条
  });
});
</script>

</body>
</html>

API

API	描述
var laypage = layui.laypage	获得 `laypage` 模块。
laypage.render(options)	laypage 组件渲染，核心方法。

渲染

laypage.render(options);

参数 options : 基础属性配置项。#详见属性

属性

属性名描述类型默认值

elem

属性名	描述	类型	默认值
elem	绑定分页容器。值可以是容器 `id` 或 DOM 对象。如： `elem: 'id'` 注意：这里不能加 `#` 号 `elem: document.getElementById('id')`	string DOM	-
count	数据总数。一般通过后端得到

绑定分页容器。值可以是容器 id 或 DOM 对象。如：