学习使用layPage, 多功能JS分页组件/插件的方法

news2024/11/16 6:03:12

学习使用layPage, 多功能JS分页组件/插件的方法

    • 效果图
    • 分页代码

效果图

在这里插入图片描述
在这里插入图片描述在这里插入图片描述
点击查看链接

分页代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</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="../res/layui/dist/css/layui.css"    media="all">
  <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
</head>
<body>
            
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>总页数低于页码总数</legend>
</fieldset>
 
<div id="demo0"></div>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>总页数大于页码总数</legend>
</fieldset>
 
<div id="demo1"></div>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>自定义主题 - 颜色随意定义</legend>
</fieldset>
 
<div id="demo2"></div>
<div id="demo2-1"></div>
<div id="demo2-2"></div>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>自定义首页、尾页、上一页、下一页文本</legend>
</fieldset>
 
<div id="demo3"></div>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>不显示首页尾页</legend>
</fieldset>
 
<div id="demo4"></div>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>开启HASH</legend>
</fieldset>
 
<div id="demo5"></div>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>只显示上一页、下一页</legend>
</fieldset>
 
<div id="demo6"></div>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>显示完整功能</legend>
</fieldset>
 
<div id="demo7"></div>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>自定义排版</legend>
</fieldset>
 
<div id="demo8"></div>
<div id="demo9"></div>
<div id="demo10"></div>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>自定义每页条数的选择项</legend>
</fieldset>
 
<div id="demo11"></div>
 
 
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>将一段已知数组分页展示</legend>
</fieldset>
 
<div id="demo20"></div>
<ul id="biuuu_city_list"></ul> 
 
          
<script src="//res/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述 JS 路径需要改成你本地的 -->
<script>
layui.use(['laypage', 'layer'], function(){
  var laypage = layui.laypage
  ,layer = layui.layer;
  
  //总页数低于页码总数
  laypage.render({
    elem: 'demo0'
    ,count: 50 //数据总数
  });
  
  //总页数大于页码总数
  laypage.render({
    elem: 'demo1'
    ,count: 70 //数据总数
    ,jump: function(obj){
      console.log(obj)
    }
  });
  
  //自定义样式
  laypage.render({
    elem: 'demo2'
    ,count: 100
    ,theme: '#1E9FFF'
  });
  laypage.render({
    elem: 'demo2-1'
    ,count: 100
    ,theme: '#FF5722'
  });
  laypage.render({
    elem: 'demo2-2'
    ,count: 100
    ,theme: '#FFB800'
  });
  
  //自定义首页、尾页、上一页、下一页文本
  laypage.render({
    elem: 'demo3'
    ,count: 100
    ,first: '首页'
    ,last: '尾页'
    ,prev: '<em>←</em>'
    ,next: '<em>→</em>'
  });
  
  //不显示首页尾页
  laypage.render({
    elem: 'demo4'
    ,count: 100
    ,first: false
    ,last: false
  });
  
  //开启HASH
  laypage.render({
    elem: 'demo5'
    ,count: 500
    ,curr: location.hash.replace('#!fenye=', '') //获取hash值为fenye的当前页
    ,hash: 'fenye' //自定义hash值
  });
  
  //只显示上一页、下一页
  laypage.render({
    elem: 'demo6'
    ,count: 50
    ,layout: ['prev', 'next']
    ,jump: function(obj, first){
      if(!first){
        layer.msg('第 '+ obj.curr +' 页');
      }
    }
  });
  
  //完整功能
  laypage.render({
    elem: 'demo7'
    ,count: 100
    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
    ,jump: function(obj){
      console.log(obj)
    }
  });
  
  //自定义排版
  laypage.render({
    elem: 'demo8'
    ,count: 1000
    ,layout: ['limit', 'prev', 'page', 'next']
  });
  laypage.render({
    elem: 'demo9'
    ,count: 1000
    ,layout: ['prev', 'next', 'page']
  });
  laypage.render({
    elem: 'demo10'
    ,count: 1000
    ,layout: ['page', 'count']
  });
  
  //自定义每页条数的选择项
  laypage.render({
    elem: 'demo11'
    ,count: 1000
    ,limit: 100
    ,limits: [100, 300, 500]
  });
  
  
  //将一段数组分页展示
  
  //测试数据
  var data = [
    '北京',
    '上海',
    '广州',
    '深圳',
    '杭州',
    '长沙',
    '合肥',
    '宁夏',
    '成都',
    '西安',
    '南昌',
    '上饶',
    '沈阳',
    '济南',
    '厦门',
    '福州',
    '九江',
    '宜春',
    '赣州',
    '宁波',
    '绍兴',
    '无锡',
    '苏州',
    '徐州',
    '东莞',
    '佛山',
    '中山',
    '成都',
    '武汉',
    '青岛',
    '天津',
    '重庆',
    '南京',
    '九江',
    '香港',
    '澳门',
    '台北'
  ];
  
  //调用分页
  laypage.render({
    elem: 'demo20'
    ,count: data.length
    ,jump: function(obj){
      //模拟渲染
      document.getElementById('biuuu_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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1364910.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

用队列实现栈oj题——225

. 个人主页&#xff1a;晓风飞 专栏&#xff1a;LeetCode刷题|数据结构|Linux 路漫漫其修远兮&#xff0c;吾将上下而求索 文章目录 题目要求&#xff1a;实现 MyStack 类&#xff1a;注意&#xff1a;示例&#xff1a;解释&#xff1a;提示&#xff1a; 解题核心数据结构的定义…

通信触发流程

该示例方案主要介绍如何通过建立的Modbus或TCP通信来实现触发方案、协议解析、发送事件和以及响应配置等功能。 需求&#xff1a;使用Modbus通信触发指定流程运行。 搭建思路&#xff1a;在接收事件中使用协议组装&#xff0c;比较规则选择上升沿&#xff0c;当接收到的值从其…

如何成为一名高级UI设计师,UI设计与交互动效进阶教学

一、教程描述 本套教程从基础学习到案例实践教学&#xff0c;涵盖了设计师所需的全部知识和实战技术&#xff0c;比如&#xff0c;品牌形象设计&#xff0c;企业视觉识别系统VIS&#xff0c;标志logo提案设计&#xff0c;banner运营视觉设计&#xff0c;字体搭配使用&#xff…

学习笔记 | Kafka

一、概述 定义 1、Kafka传统定义&#xff1a;Kafka 是一个分布式的基于 发布/订阅模式 的消息队列&#xff08;Message Queue&#xff09; &#xff0c;主要应用与大数据实时处理领域。 2、发布/订阅&#xff1a;消息的发送者不会将消息直接发送给特定的订阅者&#xff0c;而…

企业网盘全方位解读:热门云存储工具的优势与适用场景

企业网盘无疑是当下最热门的企业协同工具。什么是企业网盘&#xff1f;企业网盘与个人网盘又有什么不同呢&#xff1f;一文全方位解读企业网盘这一热门云存储工具。 什么是企业网盘 企业网盘为企业级文件存储、管理与共享平台&#xff0c;企业团队可以在企业网盘中存储企业文…

【python】连上钉钉机器人每日推送

使用Python向钉钉机器人发送消息 导入必要的库 导入json库用于处理JSON数据&#xff0c;time库用于获取当前时间&#xff0c;requests库用于发送HTTP请求。 定义send_ding_message函数 该函数接收一个消息作为参数&#xff0c;并通过POST请求发送给钉钉机器人。请求的URL和头部…

阿里云服务器可用区是什么?

阿里云服务器地域和可用区怎么选择&#xff1f;地域是指云服务器所在物理数据中心的位置&#xff0c;地域选择就近选择&#xff0c;访客距离地域所在城市越近网络延迟越低&#xff0c;速度就越快&#xff1b;可用区是指同一个地域下&#xff0c;网络和电力相互独立的区域&#…

JS加密/解密之常见的JS代码加密

在软件开发领域&#xff0c;混淆&#xff08;JS&#xff09;是一种常见的技术&#xff0c;通过改变代码结构、命名和逻辑&#xff0c;增加代码的复杂性&#xff0c;使其对于逆向工程者变得更加困难。然而&#xff0c;有时候开发者可能需要解开混淆&#xff0c;以便理解、维护或…

jupyter如何更改默认保存路径

jupyter更改默认路径 jupyter默认路径在‘c\用户\Administrator’下&#xff0c;很不方便。 接下来看如何更改默认路径: 1、找到Anaconda Prompt,打开 2、 输入conda activate env1&#xff0c;其中env1为自己创建的环境&#xff0c;如果不知道怎么创建&#xff0c;按照下面…

技术学习周刊第 1 期

2018 年参与过 1 年的 ARTS 打卡&#xff0c;也因为打卡有幸加入了 MegaEase 能与皓哥&#xff08;左耳朵耗子&#xff09;共事。时过境迁&#xff0c;皓哥已经不在了&#xff0c;自己的学习梳理习惯也荒废了一段时间。 2024 年没给自己定具体的目标&#xff0c;只要求自己好好…

大模型迎来“AppStore时刻”,OpenAI给2024的新想象

一夜之间&#xff0c;OpenAI公布了多个重磅消息&#xff0c;引发市场关注。 钛媒体App 1月5日消息&#xff0c;今晨&#xff0c;OpenAI公司向所有GPT开发者们发布一封邮件称&#xff0c;下周将上线自定义的“GPT Store”商店&#xff0c;这有望推动ChatGPT开发者生态不断完善。…

java基础-给个一键三联呗^_^哈哈

文章目录 1.注释修改注释字体三种注释方式 2.标识符和关键字3.数据类型4.类型转换5. 变量、常量、作用域6.基本运算符7.自增自减运算符、初识Math类8.逻辑运算符、位运算符9.三元运算符及小结10.包机制11.JavaDoc生成文档 1.注释 修改注释字体 打开设置Settings 三种注释方…

IDEA 每次新建工程都要重新配置 Maven的解决方案

文章目录 IDEA 每次新建工程都要重新配置 Maven 解决方案一、选择 File -> New Projects Setup -> Settingsfor New Projects…二、选择 Build,Execution,Deployment -> Build Tools -> Maven IDEA 每次新建工程都要重新配置 Maven 解决方案 DEA 每次新建工程都要…

lv14 ioctl、printk及多个此设备支持 6

1 ioctl操作实现 对相应设备做指定的控制操作&#xff08;各种属性的设置获取等等&#xff09; long xxx_ioctl (struct file *filp, unsigned int cmd, unsigned long arg); 功能&#xff1a;对相应设备做指定的控制操作&#xff08;各种属性的设置获取等等&#xff09; 参数…

关于vite的glob坑

我先展示一段代码&#xff1a; /*** function 根据pages路径动态生成路由* param {Array} 基础路由*/ export default function (routes) {const modules import.meta.glob("../pages/**/page.js", { eager: true, import: "default" });const comps im…

CSS3渐变属性详解

渐变属性 线性渐变 概念&#xff1a;线性渐变&#xff0c;指的是在一条直线上进行的渐变。在线性渐变过程中&#xff0c;起始颜色会沿着一条直线按顺序过渡到结束颜色 语法&#xff1a; background:linear-gradient(渐变角度&#xff0c;开始颜色&#xff0c;结束颜色);渐变…

循环队列的队空队满情况

有题目&#xff1a; 循环队列放在一维数组A[0....M-1]中&#xff0c;end1指向队头元素&#xff0c;end2指向队尾元素的后一个位置。假设队列两端均可进行入队和出队操作&#xff0c;队列中最多能容纳M-1个元素。初始时为空。下列判断队空和队满的条件中&#xff0c;正确的是 …

移动通信原理与关键技术学习(第四代蜂窝移动通信系统)

前言&#xff1a;LTE 标准于2008 年底完成了第一个版本3GPP Release 8的制定工作。另一方面&#xff0c;ITU 于2007 年召开了世界无线电会议WRC07&#xff0c;开始了B3G 频谱的分配&#xff0c;并于2008 年完成了IMT-2000&#xff08;即3G&#xff09;系统的演进——IMT-Advanc…

进程与计划任务管理

目录 一、进程 1.进程相关概念 2.判断线程 3.进程的命令 ps命令 top命令 pstree命令 kill与killall命令 二、计划任务 1.一次性执行任务 2.定时性周期任务 一、进程 1.进程相关概念 程序&#xff1a;保存在硬盘等介质中的可执行的代码。 进程&#xff1a;正在运行…

C++学习笔记(二十四):c++ this

this指针在c中较为常用。this是一个指向当前对象实例的指针&#xff0c;通过this指针&#xff0c;可以访问该类的成员函数。示例如下&#xff1a;this指针主要的使用场景是在类内部调用类外部的函数&#xff0c;该函数传递的参数是调用该函数的类对象&#xff0c;代码示例如下&…