layUI分页处理--乐字节前端

最新推荐文章于 2024-09-06 09:05:47 发布

dirft_din

最新推荐文章于 2024-09-06 09:05:47 发布

阅读量809

点赞数

分类专栏： jQuery java

本文链接：https://blog.csdn.net/dirft_din/article/details/106855698

版权

本文档介绍了layUI中的分页和数据表格组件的使用方法。分页部分涵盖了快速使用、基础参数设置和jump回调。数据表格部分包括快速使用、三种初始化渲染方式、转换静态表格以及各种功能的开启，如分页、头部工具栏和单元格编辑。通过laypage.render(options)设置基础参数，并利用table.render()方法进行表格渲染和重载。

摘要由CSDN通过智能技术生成

分页

模块加载名称：laypage

快速使用

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

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

基础参数

通过核心方法：laypage.render(options) 来设置基础参数。

参数选项	说明	类型	默认值
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跳页。如： // 开启location.hash的记录 laypage.render({ elem: ‘test1’ , count: 500 , // 获取起始页 curr: location.hash.replace(’#!fenye=’, ‘’) // 自定义hash值 ,hash: ‘fenye’ }); `	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

jump - 切换分页的回调

当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）

laypage.render({
   
    elem: 'page'
    ,count: 100 //数据总数，从服务端得到
    ,groups:10 // 连续出现的页码个数
    ,layout:['prev', 'page', 'next','limit','count'] // 自定义排版
    ,limits:[5,10,20] // layout属性设置了limit值，可会出现条数下拉选择框
    ,jump: function(obj, first){
   
        // obj包含了当前分页的所有参数，比如：
        console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
        console.log(obj.limit); //得到每页显示的条数

        //首次不执行
        if(!first){
   
            //do something
        }
    }
});

数据表格

模块加载名称：table

快速使用

创建一个table实例最简单的方式是，在页面放置一个元素

，然后通过 table.render() 方法指定该容器。

<!DOCTYPE html>
<html>
	<head>
	  <meta charset="utf-8">
	  <title>table数据表格</title>
	  <link rel="stylesheet" href="layui/css/layui.css">
	</head>
	<body>
		<table id="demo"></table>
	</body>
	
	<script src="layui/layui.js" type="text/javascript" ></script>
	<script type="text/javascript">
		layui.use('table', function(){
    
		  var table = layui.table;
		  
		  // 第一个实例
		  table.render({
    
			elem: '#demo'
			,url: 'user.json' // 数据接口
			,cols: