1 bootstrap-table插件介紹
一個基於bootstrap的表格渲染插件,可以極大的簡化表格的渲染操作
2 下載
github：https://github.com/wenzhixin/bootstrap-table
中文官網：https://www.bootstrap-table.com.cn/
英文官網：https://bootstrap-table.com/
下載后相關的依賴都在dist文件夾下
3 入門案例
請求json數據渲染表格
3.1 搭建工程
其中data.json的數據文件內容如下：
[
{"id":"1","name":"tom","sal":"4000","sex":"男","age":"18"},
{"id":"2","name":"jerry","sal":"2000","sex":"女","age":"26"},
{"id":"3","name":"heliufang","sal":"8000","sex":"男","age":"25"},
{"id":"4","name":"lucy","sal":"2500","sex":"女","age":"28"},
{"id":"5","name":"linda","sal":"1000","sex":"女","age":"16"},
{"id":"6","name":"jack","sal":"2500","sex":"男","age":"28"}
]
這個data.json只是在做前端分頁的時候使用
3.2 編寫測試代碼
【1.入門案例.html】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入相關樣式表 -->
<link rel="stylesheet" type="text/css" href="bootstrap3/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap3/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap-table/bootstrap-table.min.css"/>
</head>
<body>
<!-- 創建表格容器 -->
<table id="table"></table>
<!-- 引入相關js -->
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap3/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap-table/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap-table/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//通過bootrap-table插件渲染表格
$('#table').bootstrapTable({
url: 'json/data.json',//請求的url
columns: [{
field: 'id',
title: '序號'
}, {
field: 'name',
title: '姓名'
}, {
field: 'sal',
title: '薪水'
}, {
field: 'sex',
title: '性別'
},{
field: 'age',
title: '年齡'
}]
});
</script>
</body>
</html>
測試結果如下：
可以看到插件自動幫我們把數據渲染好了,是不是很方便！！！
4 前端分頁實現
【2.前端分頁.html】將【1.入門案例.html】中的渲染的js代碼改成如下：
//通過bootrap-table插件渲染表格
$('#table').bootstrapTable({
url: 'json/data.json',
columns: [{
field: 'id',
title: '序號'
}, {
field: 'name',
title: '姓名'
}, {
field: 'sal',
title: '薪水'
}, {
field: 'sex',
title: '性別'
},{
field: 'age',
title: '年齡'
}],
striped: false, //是否顯示行間隔色
cache: false, //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*）
pagination: true, //是否顯示分頁（*）
sortable: true, //是否啟用排序
sortOrder: "asc", //排序方式
sidePagination: "client",//分頁方式：client客戶端分頁，server服務端分頁（*）
pageNumber: 1,//初始化加載第一頁，默認第一頁,並記錄
pageSize: 2,//每頁的記錄行數（*）
pageList: [2, 5, 10, 20], //可供選擇的每頁的行數（*）
search: true,//是否顯示表格搜索
strictSearch: false,//是否使用嚴格搜索模式
showColumns: true, //是否顯示所有的列（選擇顯示的列）
showRefresh: true,//是否顯示刷新按鈕
minimumCountColumns: 2,//最少允許的列數
clickToSelect: true,//是否啟用點擊選中行
//height: 500,//行高，如果沒有設置height屬性，表格自動根據記錄條數設置表格高度
uniqueId: "id",//每一行的唯一標識，一般為主鍵列
showToggle: true,//是否顯示詳細視圖和列表視圖的切換按鈕
cardView: false,//是否顯示詳細視圖
detailView: false,//是否顯示父子表
});
效果如下：
5 工具欄
工具欄實現分為兩步
-
准備工具按鈕容器
-
bootstrap-table中引用插件
加上這個配置即可：toolbar: '#toolbar', //工具按鈕用哪個容器
案例【3.工具欄.html】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入相關樣式表 -->
<link rel="stylesheet" type="text/css" href="bootstrap3/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap3/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap-table/bootstrap-table.min.css"/>
</head>
<body>
<!-- 工具欄容器 -->
<div id="toolbar" class="row" style="margin-left: 5px;">
<button type="button" class="btn btn-default col-md-4">新增</button>
<button type="button" class="btn btn-info col-md-4">修改</button>
<button type="button" class="btn btn-danger col-md-4">刪除</button>
</div>
<!-- 創建表格容器 -->
<table id="table"></table>
<!-- 引入相關js -->
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap3/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap-table/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap-table/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//通過bootrap-table插件渲染表格
$('#table').bootstrapTable({
url: 'json/data.json',
columns: [{
field: 'id',
title: '序號'
}, {
field: 'name',
title: '姓名'
}, {
field: 'sal',
title: '薪水'
}, {
field: 'sex',
title: '性別'
},{
field: 'age',
title: '年齡'
}],
toolbar: '#toolbar', //工具按鈕用哪個容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*）
pagination: true, //是否顯示分頁（*）
sortable: true, //是否啟用排序
sortOrder: "asc", //排序方式
sidePagination: "client", //分頁方式：client客戶端分頁，server服務端分頁（*）
pageNumber: 1, //初始化加載第一頁，默認第一頁,並記錄
pageSize: 2, //每頁的記錄行數（*）
pageList: [2, 5, 10, 20], //可供選擇的每頁的行數（*）
search: true, //是否顯示表格搜索
strictSearch: false,
showColumns: true, //是否顯示所有的列（選擇顯示的列）
showRefresh: true, //是否顯示刷新按鈕
minimumCountColumns: 2, //最少允許的列數
clickToSelect: true, //是否啟用點擊選中行
//height: 500, //行高，如果沒有設置height屬性，表格自動根據記錄條數設置表格高度
uniqueId: "id", //每一行的唯一標識，一般為主鍵列
showToggle: false, //是否顯示詳細視圖和列表視圖的切換按鈕
cardView: false, //是否顯示詳細視圖
detailView: false, //是否顯示父子表
});
</script>
</body>
</html>
效果如下：
6 后端分頁
后端接口,我后端是java寫的具體分頁代碼就不上了,這里把接口文檔寫出來
-
請求方式：GET
-
請求參數
pageNum:查詢的是哪一頁
pageSize：每頁顯示的條數
name：姓名
age：年齡
比如：http://localhost:8080/user/searchPage?name=tom&age=&pageSize=2&pageNum=1
- 響應(json)
注意：這里必須是返回{"total":"","rows",[]}這種格式的數據
total是總共的記錄數量
rows是當前頁查出來的記錄對象數組
{
"total": 1,
"rows": [
{
"id": 1,
"name": "tom",
"age": 18,
"gender": "1",
"createTime": "2021-02-22 09:53:24"
}
]
}
【4.后端分頁.html】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入相關樣式表 -->
<link rel="stylesheet" type="text/css" href="bootstrap3/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap3/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap-table/bootstrap-table.min.css"/>
</head>
<body>
<div class="container">
<!-- 工具欄 -->
<div id="toolbar" class="row" style="margin-left: 5px;">
<form class="form-inline">
<button type="button" class="btn btn-success">新增</button>
<div class="form-group">
<label>姓名</label><input type="text" class="form-control" id="nameTxt"/>
</div>
<div class="form-group">
<label>年齡</label><input type="text" class="form-control" id="ageTxt"/>
</div>
<button onclick="search()" type="button" class="btn btn-info">查詢</button>
</form>
</div>
<!-- 創建表格容器 -->
<table id="myTable"></table>
</div>
<!-- 引入相關js -->
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap3/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap-table/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap-table/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//封裝一個初始化表格的方法
function initTable(tableId,url,columns,query){
//將原有的表格銷毀
$("#"+tableId).bootstrapTable('destroy');
//通過bootrap-table插件渲染表格
var myTable = $('#'+tableId).bootstrapTable({
method: 'GET', //請求方式（*）
url: url,
columns: columns,
toolbar: '#toolbar', //工具按鈕用哪個容器
striped: true, //是否顯示行間隔色
cache: false,//是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*）
pagination: true,//是否顯示分頁（*）
sortable: false,//是否啟用排序
sortOrder: "asc", //排序方式
sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁
pageNumber: 1, //初始化加載第一頁，默認第一頁,並記錄
pageSize: 2, //每頁的記錄行數（*）
pageList: [2, 5, 10, 20],//可供選擇的每頁的行數（*）
search: false,//是否顯示表格搜索
strictSearch: false,
showColumns: true,//是否顯示所有的列（選擇顯示的列）
showRefresh: true,//是否顯示刷新按鈕
minimumCountColumns: 2,//最少允許的列數
clickToSelect: true,//是否啟用點擊選中行
//height: 500,//行高，如果沒有設置height屬性，表格自動根據記錄條數設置表格高度
uniqueId: "id",//每一行的唯一標識，一般為主鍵列
showToggle: false,//是否顯示詳細視圖和列表視圖的切換按鈕
cardView: false,//是否顯示詳細視圖
detailView: false,//是否顯示父子表
//得到查詢的參數
queryParams : function (params) {
//這里的鍵的名字和控制器的變量名必須一致，這邊改動，控制器也需要改成一樣的
/* var temp = {
pageSize: params.limit, //頁面大小
pageNum: (params.offset / params.limit) + 1, //頁碼
//sort: params.sort, //排序列名
//sortOrder: params.order //排位命令（desc，asc）
//自定義的參數
name:params.name, //姓名
age:params.age //年齡
}; */
if(null == query || undefined == query){
query = {};
}
query.pageSize = params.limit; //頁面大小
query.pageNum = (params.offset / params.limit) + 1; //頁碼
console.log(query);
return query;
}
});
}
//初始化列信息
var columns = [
{
field: 'id',
title: '序號'
},
{
field: 'name',
title: '姓名'
},
{
field: 'gender',
title: '性別',
//formatter 為格式化函數,后端返回的性別類型: 1男2女 所以這里要處理一下再顯示
formatter: function(value, row, index){
//console.log(value);//當前列數據
//console.log(row);//當前行json數據
if(value == 1){
return "男";
}
return "女";
}
},
{
field: 'age',
title: '年齡'
},
{
field: '',
title: '操作',
//如果需要對列處理可以寫在formatter函數中
formatter: function(value,row,index){
return '<button onclick="updateFun('+row.id+')" type="button" class="btn btn-warning btn-xs">修改</button> '
+ '<button onclick="deleteFun('+row.id+')" type="button" class="btn btn-danger btn-xs">刪除</button>'
}
}
];
//點擊修改按鈕
function updateFun(data){
alert("修改："+data)
console.log(data)
}
//點擊刪除按鈕
function deleteFun(data){
alert("刪除："+data)
console.log(data)
}
//點擊查詢按鈕
function search(){
var name = $("#nameTxt").val();
var age = $("#ageTxt").val();
var queryParams = {name,age};
initTable("myTable",'http://localhost:8080/user/searchPage',columns,queryParams);
}
//第一次進入頁面加載表格
initTable("myTable",'http://localhost:8080/user/searchPage',columns,null);
</script>
</body>
</html>
運行效果如下：
