Layui 使用数据表格 Table 分页显示数据

1.准备好一个合适的数据接口

1.数据量还行
2.接口返回的数据最好满足 table 组件默认规定的数据格式
在这里插入图片描述
我这里用 Java SSM 搭了一个后台，取一个 url 来用，这个数据接口有 1000 条数据返回，这样，我们看分页效果也比较明显

2.随便写一个测试 Demo

2.1.我们先随便写一个测试 Demo 网页

<!DOCTYPE html>
<html>
<head>
	<title>Table Demo</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="plugin/layui/css/layui.css">
	<script src="plugin/layui/extend/city-picker/city-picker.data.js"></script>
	<link rel="stylesheet" type="text/css" href="plugin/layui/extend/city-picker/city-picker.css">
</head>
<body>
	<div class="layui-cow layui-col-md6 layui-col-md-offset1" style="margin-top: 20px">
		<fieldset class="layui-elem-field layui-field-title site-title">
			<legend><a name="attr">Table 使用</a></legend>
		</fieldset>
		<table class="layui-hide" id="stuTable" lay-filter="stuTable"></table>
		
	</div>
	
	<script type="text/javascript" src="plugin/layui/layui.all.js"></script>
	<script type="text/javascript">
		layui.use(['table'],function(){
			var table = layui.table;	//表格

			table.render({
				elem:'#stuTable'	//表单ID
				,url:'http://localhost:8080/api/student'	//数据接口
				,page:{				//分页设置
					limit:10,		//默认每一页显示数量
					limits:[5,10,20,30,40,50]		//可选择每页显示的数量
				}
				,cols:[[			//表格列
					{field:'studentId',title:'ID',align:'center',sort:false }
					,{field:'studentName',title:'姓名',align:'center',sort:false }
					,{field:'gender',title:'性别',align:'center',sort:false }
					,{field:'birthday',title:'出生年月',align:'center',sort:false }
					,{field:'admissionTime',title:'入学时间',align:'center',sort:false }
					,{field:'address',title:'籍贯',align:'center',sort:false }
				
				]]
			});
		})
	</script>
</body>
</html>

2.2.我们在浏览器打开该网页看看效果，发现报错显示数据接口异常，而我们从控制台的报错可以判断出这是属于：跨域问题（CORS / Access-Control-Allow-Origin）
在这里插入图片描述

3.解决问题

3.1.我在网上找到不少解决问题的办法，随便试了一个就成功了，那就是添加跨域的注解 @CrossOrigin(origins = “*”)

对这个问题感兴趣的小伙伴可以去看看 xcbeyond 大佬写的 跨域问题（CORS / Access-Control-Allow-Origin）

在这里插入图片描述
3.2.这次我们重新打开看下，发现数据可以正常显示了

4.优化显示以及功能补充

1.首先我们把性别编号显示为对应的汉字
2.再调整各列的宽度
3.添加头部工具栏
4.添加操作列

		<!-- 头工具 -->
	    <script type="text/html" id="toolbarStudent">
	        <div class="layui-inline">
	            <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
	        </div>
	    </script>
		<!-- 性别 -->
		<script type="text/html" id="gender">
		    {{# if (d.gender==1) {}}
		    <span>男</span>
		    {{# }else if(d.gender==2){}}
		    <span>女</span>
		    {{# } else{ }}
		    <span>未知</span>
		    {{# }}}
		</script>
		<!-- 行工具 -->
	    <script type="text/html" id="barOperate">
	        <a class="layui-btn layui-btn-primary layui-btn-sm" lay-event="detail">查看</a>
	        <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
	        <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</a>
	    </script>