layui表格使用

最新推荐文章于 2024-04-18 09:36:32 发布

Eason_Lou

最新推荐文章于 2024-04-18 09:36:32 发布

阅读量96

点赞数

分类专栏：前端文章标签： layui json 前端

本文链接：https://blog.csdn.net/weixin_54366356/article/details/120992920

版权

前端专栏收录该内容

28 篇文章 3 订阅

订阅专栏

layui表格使用

从接口请求到json数据后填入table内即可加载出layui数据表格，无需过多繁琐操作,支持表格内容搜索与分页

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>layui表格使用</title>
		<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
		<script src="https://www.layuicdn.com/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="layui-col-md12">
			<div class="layui-inline" style="float: right;">
				<input class="layui-input" onkeyup="getKey()" name="id" id="demoReload" autocomplete="on"
					placeholder="输入内容搜索">
			</div>
			<table class="layui-table" id="demo"></table>
		</div>

		<script type="text/javascript">
			//显示表格
			function createTableShow(json) {
				layui.use(['table'], function() {
					var table = layui.table;
					layer.load(2);
					table.render({
						//height:500,
						elem: '#demo',
						data: json,
						page: true,
						limits: [10, 20, 50, 100],
						toolbar: 'default',
						defaultToolbar: ['filter', 'print', 'exports'],
						cols: [
							[{
									title: '序号',
									type: 'numbers',
									width: 80,
									fixed: 'left',
								},
								{
									field: 'name',
									minWidth: 200,
									title: '名称',
									sort: true,
								},
								{
									field: 'money',
									title: '数量'
								},
								{
									field: 'value',
									title: '值'
								},
								{
									field: 'id',
									align: 'center',
									title: '操作',
									templet: function(d) {
										return "<h3>自定义</h3>"
									},
								}
							]
						],
						done: function() {
							layer.closeAll('loading');
						}
					});

				});
			};
			//创建虚拟数据
			var json = []; //假设从接口获取的数据
			for (var i = 0; i < 100; i++) {
				json.push({
					name: '随机的' + (Math.random() * 1000).toFixed(0),
					money: (Math.random() * 1000).toFixed(0),
					value: i
				})
			};
			createTableShow(json);


			//搜索
			function getKey() {
				var key = document.getElementById("demoReload").value;
				var data = [];
				json.map(item => {
					if ((item.name).toString().includes(key) == true || (item.money).toString().includes(
							key) == true || (item.value).toString()
						.includes(key) == true) {
						data.push(item)
					}
				})
				createTableShow(data)
			}
			
		</script>
	</body>
</html>

在这里插入图片描述

Eason_Lou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
layui表格使用

layui表格使用从接口请求到json数据后填入table内即可加载出layui数据表格，无需过多繁琐操作,支持表格内容搜索与分页<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi
复制链接

扫一扫