layui框架学习(32:表单)

news2024/12/25 23:47:28

  Layui中的分页模块laypage支持在指定的容器中显示分页信息,主要是指总页数、当前页面、上一页/下一页等信息,可以配合其它组件实现分页显示数据或者分页显示内容,事实上,Layui中的动态数据表格等模块都附带有显示分页功能。laypage分页模块的基本用法及显示效果如下所示:

	<div class="layui-bg-orange layui-border-green" id="MultyPageDemo" style="width: 500px;margin-top: 50px;"></div>
	<script>
		layui.use('laypage', function(){
		  var laypage = layui.laypage;
		  
		  laypage.render({
			elem: 'MultyPageDemo' ,
			count: 750 ,
			limit:50,
			prev:'<',
			next:'>'				
		  });
		});
	</script>

在这里插入图片描述

  基础参数limit设置每页显示的数据数量,默认为10,该属性可以直接赋值,也可以通过limits属性设置可选值,通过下拉方式选择limit值;
  基础参数limits设置limit属性的可选值,类似于WInform中设置combobox控件的items属性。注意需在layout属性中设置limit参数才能显示limits对应的下拉框。其用法及效果如下所示:

	laypage.render({
		elem: 'MultyPageDemo' ,
		count: 750 ,
		limit:50,
		limits:[10,20,50,100,200],
		layout: ['prev', 'page', 'next', 'limit'],
		prev:'<',
		next:'>'				
	  });

在这里插入图片描述

  基础参数count设置数据总数量,该属性与limit相除即为总页数。
  基础参数groups设置连续出现的页码数量,默认值为5。其效果如下所示:
在这里插入图片描述

  基础参数prev/next/first/last设置分页模块中上一页、下一页、首页和尾页按钮的显示名称,这四个按钮的默认名为分别为上一页、下一页、1、总页码值。其用法及效果如下所示(需在layout属性中设置显示相应的按钮):

	 laypage.render({
		elem: 'MultyPageDemo' ,
		count: 750 ,
		limit:20,
		limits:[10,20,50,100,200],
		prev:'回到上一页',
		next:'跳转到下一页',
		first:'开头页',
		last:'结束页',
		groups:5,
		layout: ['prev', 'page', 'next']
	  });

在这里插入图片描述

  基础参数layout设置分页模块的显示内容和显示顺序,为一字符串数组,每个字符串对应按钮或内容,主要包括count(总条目输区域)、prev(上一页区域)、page(分页区域)、next(下一页区域)、limit(条目选项区域)、refresh(页面刷新区域。注意:layui 2.3.0 新增) 、skip(快捷跳页区域)。其用法已在上面列出,在此不再赘述。
  基础参数theme设置分页模块的样式,可以为颜色值,也可以设置为字符串,后者lauui会自动生成 class=“layui-laypage-xxx” 的CSS类,便于自定义主题。其用法及效果如下所示:

	laypage.render({
		elem: 'MultyPageDemo' ,
		count: 750 ,
		limit:20,
		limits:[10,20,50,100,200],
		prev:'回到上一页',
		next:'跳转到下一页',
		first:'开头页',
		last:'结束页',
		groups:5,
		layout: ['prev', 'page', 'next'],
		theme:'#aa00ff'
	  });

在这里插入图片描述

  基础参数curr设置默认显示页,默认值为1,同时基础参数hash支持自定义哈希值,该参数配合curr支持刷新页面时自动定位到刷新前的页码,具体可以查看参考文献3中分页示例中的“开启HASH”示例,其它示例刷新后默认显示第1页,而次示例则跳转到刷新前的页面。
  基础参数jump设置切换页面时的事件响应函数,通过该事件可以动态加载切换后页码对应的数据,参考文献3中分页示例中有使用示例,有兴趣的可以参考。

参考文献:
[1]B站:layui框架精讲全套视频教程
[2]https://layui.gitee.io/v2/docs/
[3]https://layui.gitee.io/v2/demo/
[4]https://github.com/layui/layui/

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

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

相关文章

hive之文件格式与压缩

hive文件格式&#xff1a; 概述&#xff1a; 为Hive表中的数据选择一个合适的文件格式&#xff0c;对提高查询性能的提高是十分有益的。Hive表数据的存储格式&#xff0c;可以选择text file、orc、parquet、sequence file等。 文本文件&#xff1a; 文本文件就是txt文件&…

【算法 -- LeetCode】(025) K 个一组翻转链表

1、题目 给你链表的头节点 head &#xff0c;每 k 个节点一组进行翻转&#xff0c;请你返回修改后的链表。 k 是一个正整数&#xff0c;它的值小于或等于链表的长度。如果节点总数不是 k 的整数倍&#xff0c;那么请将最后剩余的节点保持原有顺序。 你不能只是单纯的改变节点…

企业服务器数据库中了360后缀勒索病毒怎么解决加密的方式有哪些

随着网络安全问题日益突出&#xff0c;企业服务器数据库成为黑客攻击的重要目标之一。近日&#xff0c;我们收到很多企业的求助&#xff0c;企业的服务器数据库遭到了360后缀的勒索病毒攻击&#xff0c;导致企业内部的许多重要数据被加密无法读取使用&#xff0c;严重影响了企业…

05网络模型练习题

新版MATLAB中&#xff0c;图论工具箱的函数进行了更换 MATLAB中文参考文档&#xff1a;https://ww2.mathworks.cn/help/matlab/index.html 遍历、最短路径和循环 bfsearch 广度优先图搜索 dfsearch 深度优先图搜索 shortestpath 两个单一节点之间的最短路径 shortestpathtree …

Flask 笔记

Flask 笔记 一、Flask介绍 1、学习Flask框架的原因 2020 Python 开发者调查结果显示Flask和Django是Python Web开发使用的最主要的两个框架。 2、Flask介绍 ​ Flask诞生于2010年&#xff0c;是Armin ronacher用Python 语言基于Werkzeug工具箱编写的轻量级Web开发框架。 ​…

企业数字化转型要转什么?怎么转?_光点科技

随着科技的飞速发展和互联网的普及&#xff0c;数字化转型已成为现代企业持续发展和提高竞争力的必经之路。数字化转型是指企业在信息技术的驱动下&#xff0c;将传统的业务模式、流程和文化进行全面优化和改造&#xff0c;以适应数字化时代的新要求。 一、企业数字化转型的重要…

二极管常见参数

写在前面&#xff1a; 本文章旨在总结备份、方便以后查询&#xff0c;由于是个人总结&#xff0c;如有不对&#xff0c;欢迎指正&#xff1b;另外&#xff0c;内容大部分来自网络、书籍、和各类手册&#xff0c;如若侵权请告知&#xff0c;马上删帖致歉。 目录 肖特基二极管PN…

CCLINK IE转MODBUS-TCP网关cclink与以太网的区别

你是否曾经遇到过需要同时处理CCLINK IE FIELD BASIC和MODBUS两种数据协议的情况&#xff1f;远创智控的YC-CCLKIE-TCP网关可以帮助你解决这个问题。 远创智控YC-CCLKIE-TCP网关可以分别从CCLINK IE FIELD BASIC一侧和MODBUS一侧读写数据&#xff0c;然后将数据存入各自的缓冲区…

SpringBoot整合可视化监控工具——SpringBoot Admin

目录 父项目 子模块——server 子模块——client 开放监控指标 性能 环境 日志配置 映射 问题一: 明明项目启动却还是Instance 是 office 问题二: 记springboot中yml文件最后一位是星号*的写法 在说软件监控之前&#xff0c;我们先来了解一下软件的发展史&#xff0c…

【字符流】案例:文件到集合

案例&#xff1a;文件到集合 1.需求&#xff1a; 把文本文件中的数据读取到集合&#xff0c;并遍历集合。要求&#xff1a;文件中的每一行数据是一个集合元素 2.思路 创建字符缓冲输入流对象创建ArrayList集合对象调用字符缓冲输入流对象的方法读数据把读取到的字符串数据存…

【Lingo软件求解案例一:MCM1988:B题两辆平板车的装货问题】

题目描述 有 七种规格的包装箱 要装到 两辆平板车 上 包装箱的宽和高是一样的 但是厚度&#xff08;t 厘米&#xff09;和重量&#xff08;w 公斤&#xff09;是不一样的 表格中给出每种包装箱的厚度、重量和数量 每辆平板车有10.2米长的地方可以用来装包装箱 像面包片一样 载…

【PostgreSQL内核学习(七)—— 查询规划(生成路径)】

查询规划——预处理 生成路径 声明&#xff1a;本文的部分内容参考了他人的文章。在编写过程中&#xff0c;我们尊重他人的知识产权和学术成果&#xff0c;力求遵循合理使用原则&#xff0c;并在适用的情况下注明引用来源。 本文主要参考了《PostgresSQL数据库内核分析》一书 生…

进阶C语言——动态内存管理

好久不见&#xff0c;今天我们学习一下C语言的动态内存管理&#xff0c;这是一个和指针一样重要的章节&#xff0c;所以大家一定要好好学这章。 1. 为什么存在动态内存分配 我们已经掌握的内存开辟方式有&#xff1a; int val 20;//在栈空间上开辟四个字节 char arr[10] {0};…

Obsidian同步到Notion

插件介绍 将Obsidian的内容同步到Notion需要使用一个第三方插件"Obsidian shared to Notion"EasyChris/obsidian-to-notion: Share obsidian markdown file to notion and generate notion share link 同步obsdian文件到notion&#xff0c;并生成notion分享链接&am…

数据仓库表设计理论

数据仓库表设计理论 数仓顾名思义是数据仓库&#xff0c;其数据来源大多来自于业务数据(例如:关系型数据库)&#xff0c;当设计数仓中表类型时(拉链表、增量表、全量表、流水表、切片表)时&#xff0c;应先观察业务数据的特点再设计数仓表结构 首先业务数据是会不断增长的-即…

flask介绍、快速使用、配置文件、路由系统

前言: Flask框架和Django框架的区别&#xff1a; Django框架&#xff1a; 大而全&#xff0c;内置的app的很多&#xff0c;第三方app也很多Flask框架&#xff1a; 小而精&#xff0c;没有过多的内置app&#xff0c;只能完成web框架的基本功能&#xff0c;很多功能都需要借助第三…

护城河理论

护城河理论 护城河理论|来自股神巴菲特&#xff0c;是指投资的企业在某一方面的核心竞争力。 模型介绍 在2000年的伯克希尔哈撒韦的年会上&#xff0c;巴菲特说&#xff1a;让我们来把护城河作为一个伟大企业的首要标准&#xff0c;保持它的宽度&#xff0c;保持它不被跨越。我…

【字符流】案例:集合到文件

案例&#xff1a;集合到文件 1.需求&#xff1a; 把ArrayList集合中的字符串数据写入到文本文件。要求&#xff1a;每一个字符串元素作为文件中的一行数据 2.思路 创建ArrayList集合往集合中存储字符串元素创建字符缓冲输出流对象遍历集合&#xff0c;得到每一个字符串数据调…

『Dubbo SPI源码分析』依赖注入机制分析

Dubbo Wrapper 依赖注入机制分析 基于 2.7.0 版本上一章&#xff1a;『Dubbo SPI源码分析』Wrapper 机制分析 创建测试 demo 首先创建一个接口&#xff0c;举例为 Car package com.luban.dubbo_spi.api;SPI public interface Car {public void getColor();public void getC…