首页 > 其他分享 >LayUI-05

LayUI-05

时间:2023-09-23 10:02:46浏览次数:39  
标签:laypage 分页 自定义 05 LayUI layui hash String

4.2 分页laypage

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

快速使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layPage快速使用</title>
  <link rel="stylesheet" href="/static/build/layui.css" media="all">
</head>
<body>
 
<div id="test1"></div>
 
<script src="/static/build/layui.js"></script>
<script>
layui.use('laypage', function(){
  var laypage = layui.laypage;
  
  //执行一个laypage实例
  laypage.render({
    elem: 'test1' //注意,这里的 test1 是 ID,不用加 # 号
    ,count: 50 //数据总数,从服务端得到
  });
});
</script>
</body>
</html>

4.2.1 基础参数

参数选项

说明

类型

默认值

elem

指向存放分页的容器,值可以是容器ID、DOM对象。如: 1. elem: 'id' 注意:这里不能加 # 号 2. elem: document.getElementById('id')

String/Object

-

count

数据总数。一般通过服务端得到

Number

-

limit

每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。

Number

10

limits

每页条数的选择项。如果 layout 参数开启了 limit,则会出现每页条数的select选择框

Array

[10, 20, 30, 40, 50]

curr

起始页。一般用于刷新类型的跳页以及HASH跳页。

Number

1

groups

连续出现的页码个数

Number

5

prev

自定义“上一页”的内容,支持传入普通文本和HTML

String

上一页

next

自定义“下一页”的内容,同上

String

下一页

first

自定义“首页”的内容,同上

String

1

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/Boolean

false

标签:laypage,分页,自定义,05,LayUI,layui,hash,String
From: https://blog.51cto.com/u_16228353/7575814

相关文章

  • 05_其他关键字
    其他关键字const只读只能初始化,不能赋值,只读register寄存器如果变量被高频使用,会自动将变量存储在寄存器中,目的:提高访问效率如果用户想将变量直接放入寄存器中,可以使用register修饰寄存器变量volatile强制访问内存volatileintdata=0;//访问data强......
  • 05_webview操作和使用
      新建一个文件夹,跟之前一样,在Vscode终端里输入yarncreateelectron-appDrag。  首先也是按照之前的方法去创建js和js文件夹下的render.js。  在index.js中的webPreferences添加:  红框中的代码是html支持webview。webview其实是嵌入式一个网页,让我......
  • Day05 - Vue之动态组件、插槽、项目的创建
    动态组件//关键字: component//使用方法:<component:is="who"></component>//component标签的is属性等于组件名字,这里就会显示这个组件<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><link......
  • P7907 [Ynoi2005] rmscne
    题意给定长为\(n\)的序列,\(q\)次询问区间\([l,r]\)的最短区间\([l',r']\),满足所有在\([l,r]\)中出现的数也在\([l',r']\)中出现,你只需要输出\([l',r']\)的长度即可。Sol离线,然后枚举\(r\)。考虑维护一个前缀的弱化版询问。设\([l,p_i]\)为满足当前区......
  • CF1805D A Wide, Wide Graph
    原题翻译如果距离越长越优的题要考虑树的直径我们发现这题对于一个\(k\),我们对于每个点,让他从最远的点连过来得到的图的连通性等价于原图的连通性而对于一个点最远的点就是他到直径两个端点的距离因此我们求出树的直径,然后对于两个端点\(dfs\),求出他们的深度,对于每个点,距离他......
  • 龙芯2K0500核心板可以在智能水表产品上的解决方案-迅为电子
      将龙芯2K0500处理器应用于智能水表产品可以实现更智能、高效的水资源管理和监控。以下是一个基本的智能水表解决方案:硬件配置龙芯2K0500处理器:作为核心处理器,用于控制水表的操作、数据采集和通信。流量传感器:用于测量水流量,通常采用超声波或涡轮传感器,以获得准确的用水数据......
  • layui表格中关键字加粗加红显示
    使layui表格中根据关键词进行加红加粗显示,先看效果前台代码<scripttab="table处理及事件">vartable=layui.table;layui.use(['table'],function(){table.render({id:'ID-table-news',elem:'#ID-table-n......
  • Redis漏洞总结--未授权--沙箱绕过--(CNVD-2015-07557)&&(CNVD-2019-21763)&&(CVE-2022
    Redis未授权--沙箱绕过--(CNVD-2015-07557)&&(CNVD-2019-21763)&&(CVE-2022-0543)环境复现采用Vulfocus靶场进行环境复现,官网docker搭建有问题,具体搭建教程参考vulfocus不能同步的解决方法/vulfocus同步失败CNVD-2015-07557未授权访问影响版本Redis<=5.0.5漏洞探测使用端......
  • 自动化测试系列:接口自动化测试框架--05通过邮件发送测试结果的封装
    From: https://mp.weixin.qq.com/s/3w9GT2TYKIhrKCi36-DYRw---------------------------------------------------------------------------------------框架功能介绍1.自动整理接口测试用例:只需使用抓包工具,将需要接口请求另存为HAR文件,执行har2excel.bat即可自动生成接口请......
  • Java学习之路--GUI编程05
    packagecom.gui.lesson05;importjavax.swing.*;importjava.awt.*;importjava.net.URL;//2023.3.24GUI编程--Swing--JButton按钮学习publicclassJButtonDemo01extendsJFrame{publicJButtonDemo01(){Containercontainer=this.getContentPane();//Contain......