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