Layui 使用数据表格 Table 分页显示数据
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>
5.效果演示
当然如果还有什么关于 layui 方面的问题,可以去看看 Layui 的官方文档 Layui 开发使用文档
5.源码地址
GitHub地址:https://github.com/1123GY/Layui