快速使用laypage分页demo

最新推荐文章于 2022-05-10 10:45:30 发布
最新推荐文章于 2022-05-10 10:45:30 发布
阅读量1.4k 收藏 2
点赞数 1
分类专栏： 前端(JS/HTML/CSS)
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tenlay_Li/article/details/88660304
版权

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>laypage</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../public/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div style="text-align: center;">

</div>    

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>将一段已知数组分页展示</legend>
</fieldset>

<div id="demo"></div>
<ul id="city_list"></ul>


<script src="../public/layui/js/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['laypage', 'layer'], function(){
        var laypage = layui.laypage
            ,layer = layui.layer;

        //用于分页展示的测试数据，一般通过服务端得到
        var data = [
            '北京',
            '上海',
            '广州',
            '深圳',
            '杭州',
            '长沙',
            '合肥',
            '宁夏',
            '成都',
            '西安',
            '南昌',
            '上饶',
            '沈阳',
            '济南',
            '厦门',
            '福州',
            '九江',
            '宜春',
            '赣州',
            '宁波',
            '绍兴',
            '无锡',
            '苏州',
            '徐州',
            '东莞',
            '佛山',
            '中山',
            '成都',
            '武汉',
            '青岛',
            '天津',
            '重庆',
            '南京',
            '九江',
            '香港',
            '澳门',
            '台北'
        ];

        //调用分页
        laypage.render({
            elem: 'demo'         // 1.elem: 'id' 注意：这里不能加 # 号,2. elem: document.getElementById('id')
            ,count: data.length  //数据总数。一般通过服务端得到
            //,limit: 4         //每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。
            ,limits: [10, 20, 50]   //每页条数的选择项
            ,layout: [ 'prev', 'page', 'next', 'limit', 'limits']
            ,theme: '#FF5722'   //自定义主题
            ,jump: function(obj){
                //模拟渲染
                document.getElementById('city_list').innerHTML = function(){
                    var arr = []
                        ,thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
                    layui.each(thisData, function(index, item){
                        arr.push('<li>'+ item +'</li>');
                    });
                    return arr.join('');
                }();
            }
        });

    });
</script>

</body>
</html>

基础参数选项

通过核心方法：laypage.render(options) 来设置基础参数。由于使用非常简单，本篇直接罗列核心接口的参数选项

参数选项说明类型默认值
elem指向存放分页的容器，值可以是容器ID、DOM对象。如：
1. elem: 'id' 注意：这里不能加 # 号 
2. elem: document.getElementById('id')		String/Object-
count数据总数。一般通过服务端得到Number-
limit每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。Number10
limits每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框Array[10, 20, 30, 40, 50]
curr起始页。一般用于刷新类型的跳页以及HASH跳页。如：
  1. //开启location.hash的记录
  2. laypage.render({
  3. elem: 'test1'
  4. ,count: 500
  5. ,curr: location.hash.replace('#!fenye=', '') //获取起始页
  6. ,hash: 'fenye' //自定义hash值
  7. });
  8.  
Number1
groups连续出现的页码个数Number5
prev自定义“上一页”的内容，支持传入普通文本和HTMLString上一页
next自定义“下一页”的内容，同上String下一页
first自定义“首页”的内容，同上String1
last自定义“尾页”的内容，同上String总页数值
layout自定义排版。可选值有：count（总条目输区域）、prev（上一页区域）、page（分页区域）、next（下一页区域）、limit（条目选项区域）、refresh（页面刷新区域。注意：layui 2.3.0 新增） 、skip（快捷跳页区域）Array['prev', 'page', 'next']
theme自定义主题。支持传入：颜色值，或任意普通字符。如： 
1. theme: '#c00' 
2. theme: 'xxx' //将会生成 class="layui-laypage-xxx" 的CSS类，以便自定义主题		String-
hash开启location.hash，并自定义 hash 值。如果开启，在触发分页时，会自动对url追加：#!hash值={curr} 利用这个，可以在页面载入时就定位到指定页String/Booleanfalse
thinktech_Li
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
这是一个基于laypage分页的demo
08-10
这是一个基于laypage分页的demo，以及自己写的webkPage分页插件demo
使用laypage分页
热门推荐
FreshMan
08-09 2万+
在开发的时候经常遇到分页比较麻烦，尤其对于一个后端程序猿来说，但是这个问题不能不解决，于是找了一个分页的控件用用，记录在下，以便以后使用。 首先看下laypage网站的简介，然后你就发现很简单的使用了。 以下是网站中使用的简单例子： //以下将以jquery.ajax为例，演示一个异步分页 $.getJSON('test/demo1.json', {curr: 6}, function(
php laypage 开发demo,laypage+laytpl示例
weixin_31539461的博客
04-14 133
laypage加laytpl的使用方法，技术不好，摸索了好久才弄出来。首先去layer官网下载这两个插件，按照他们的文档引入js然后我的代码如下：1：html+jquery//laypage分页Ajaxpage();function Ajaxpage(curr,num){if(!num){num=5; //num是当前要查询的数量，我这里设置了默认5条，前台可以修改要显示的数量};var c...
laypage分页
欢迎道友来访
01-20 932
预览： 1.引入laypage所需的js和css文件 <link rel="stylesheet" type="text/css" href="layui/css/layui.css"> <script type="text/javascript" src="layui/layui.all.js"></script> <!--这里换成你的路径--> 2.html代码 <!--当前页码--> <input type="hidden" id.
laypage分页控件使用实例详解
09-02
引入库文件后，就可以开始配置和使用laypage分页控件。以下是一个基础的使用示例： ```javascript laypage({ cont: 'page1', // 容器，可以是id名、原生DOM对象或jQuery对象 pages: res.pages, // 通过后台接口...
JSP + laypage分页完整案例
01-29
JSP+laypage分页（含服务端分页和前端分页两种方式）完整demo PS:具体参考https://blog.csdn.net/zhengvipin/article/details/80217321
jQuery中layer分页器的使用
10-20
首先，Layer分页器的使用需要引入layui库，该库包含了laypage和layer两个主要模块。在HTML文件中，确保已经正确地引入layui.css和layui.js： ```html <script src="https://www.layui.com/layui/layui.js"></...
layPage分页
01-12
layPage是一款多功能的js分页组件，即适用于异步分页，又可用于传统的整页刷新跳页，还支持信息流加载，并且可无缝迁移至Node.js平台。
使用Laypage进行分页
wmh13262227870的博客
07-16 2396
使用Laypage进行分页Laypage是一款简单，方便的分页插件，无需写过多的js代码只需要向后台传入当前页数（由于本人偷懒在JS中写死了pageSize）<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www
laypage分页完整案例
03-12
利用laypage插件对数据进行分页，并通过ajax配合servlet进行后台动态获取数据，dao层由mybatis管理，数据库为mysql
基于layPage插件实现两种分页方式浅析
12-11
最近在开发过程中经常用到分页，今天挤出些时间来捋一捋自己的经验 在web开发中，一般显示数据列表页时，我们会用到分页控件来显示数据。采用分页一般基于两种不同的需求，一种是数据量不算很大，但是在页面展示又显得过长，看起来很不舒服。一种则是因为数据量太过于庞大，无法一次性去数据库将数据读取出来，于是采用分页的形式去将数据分页显示出来。 前者即所谓的前端分页，而后者就是服务端分页。 两者的区别在于：前端分页是将所有数据取出，为方便用户查看，合理展示数据。在前端js上对数据进行分页。而服务端分页是根据当前页面要展示的内容，通过前端传入的参数，获取对应页面的数据进行展示。简而言之就是前端分页是在前端对数
Layui laypage分页
weixin_43652106的博客
12-18 756
JS将后端给的全部数据进行分页，代码示例： <script> //JavaScript代码区域 layui.use(['element', 'laydate', 'layer', 'layedit', 'form','laypage'], function () { var form = layui.form, ...
使用layui的laypage完成分页
weixin_46410916的博客
05-10 2217
使用layui分页 <link rel="stylesheet" href="css/layui.css">//样式直接放header里 <div id="test1"></div> <script src="js/layui.js"></script> //根据total（数据总量）初始化分页组件 var js_total=0; function aaa(total){ layui.use(['laypage'], function() {
laypage 实现动态分页
qq_35530339的博客
03-08 1136
LayUI实现动态分页 layPage是一款多功能的js分页组件，即适用于异步分页，又可用于传统的整页刷新跳页，还支持信息流加载，并且可无缝迁移至Node.js平台。layPage不依赖于任何第三方库，直接拿来用即可，它的接口继承了layui系列组件的一贯简洁，极易上手。 在实现之前，首先要知道layPage的工作原理...
layui 之 laypage分页插件
哈
05-21 9919
理论 通过核心方法：laypage.render(options) 来设置基础参数，该核心接口的参数如下表所示： 参数选项 说明 类型 类型 elem 指向存放分页的容器，值可以是容器ID、DOM对象。如：1. elem: ‘id’ 注意：这里不能加 # 号 2. elem: document.getElementById(‘id’) String/Object - count 数据总数。一般通过服务端得到 Number - limit 每页显示的条数。laypage将会借助 cou
laypage分页控件的使用
Nemo的笔记本
01-18 539
laypage 多功能JavaScript分页组件 v1.3的使用和代码说明 &amp;amp;lt;!doctype html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;utf-8&amp;quot;&amp;amp;gt; &
Laypage完整分页示例
qq_45244974的博客
07-11 880
//控制器 //连接Apihelper HttpClientHelper helper = new HttpClientHelper("http://localhost:58185/"); //获取部门信息 public IActionResult GetSection(int page = 0,int limit = 0) //page 第几页 limit 每页显示多少条 { string json = helper.G
laypage这个分页插件怎么用？
零一
12-09 209
/// <summary> /// 数据分页 /// </summary> /// <param name="viewName">表名</param> /// <param name="fieldName">字段</param> ...
layui表格与layui分页组件搭配使用
最新发布
05-16
layui表格与layui分页组件可以很好地搭配使用，可以实现数据的分页展示，具体使用方法如下： 1. 引入layui框架和相关样式文件： ```html <link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script> ``` 2. 创建一个容器用于展示表格和分页组件： ```html <div id="demo"></div> ``` 3. 编写JavaScript代码，渲染表格和分页组件： ```javascript layui.use(['table', 'laypage'], function(){ var table = layui.table; var laypage = layui.laypage; // 表格渲染 table.render({ elem: '#demo', url: '/data.json', // 数据接口 cols: [[ // 表头 {field: 'id', title: 'ID', width: 80}, {field: 'username', title: '用户名', width: 120}, {field: 'sex', title: '性别', width: 80}, {field: 'city', title: '城市', width: 100}, {field: 'sign', title: '签名', width: 200}, {field: 'experience', title: '积分', width: 80}, {field: 'score', title: '评分', width: 80}, {field: 'classify', title: '职业', width: 100}, {field: 'wealth', title: '财富', width: 120} ]] }); // 分页组件渲染 laypage.render({ elem: 'demo', // 分页容器的id count: 50, // 数据总数 limit: 10, // 每页显示的条数 curr: location.hash.replace('#!fenye=', ''), // 获取hash值作为当前页码 hash: 'fenye', // 自定义hash值 jump: function(obj, first){ if(!first){ // 非首次加载才会执行 table.reload('demo', { where: { // 其他参数 page: obj.curr, limit: obj.limit } }); } } }); }); ``` 以上代码中，`table.render()`函数用于渲染表格，`laypage.render()`函数用于渲染分页组件。其中，`table.reload()`函数用于重新加载表格数据，实现分页效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值