基於 Bootstrap 的 jQuery 表格插件，通過簡單的設置，就可以擁有強大的單選、多選、排序、分頁，以及編輯、導出、過濾（擴展）等等的功能。
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Dashboard | Nadhif - Responsive Admin Template</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.css">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.1.4/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<style>
#delUser,#dupUser{
background: #1caf9a;
color: #FFFFFF;
border: none;
margin-left: 12px;
}
</style>
<body>
<table id="mytab" class="table table-hover"></table>
<script>
$('#mytab').bootstrapTable({
url: '',
queryParams: "queryParams",
toolbar: "#toolbar",
sidePagination: "true",
striped: true, // 是否顯示行間隔色
//search : "true",
uniqueId: "ID",
pageSize: "5",
pagination: true, // 是否分頁
sortable: true, // 是否啓用排序
columns: [{
field: 'id',
title: '登錄名'
},
{
field: 'name',
title: '暱稱'
},
{
field: 'price',
title: '角色'
}, {
title: '操作',
field: 'id',
align: 'center',
valign: 'middle',
formatter: option
}
], //數據
data: [{
"id": 0,
"name": "Item 0",
"price": "$0"
},
{
"id": 1,
"name": "Item 1",
"price": "$1"
},
{
"id": 2,
"name": "Item 2",
"price": "$2"
},
{
"id": 3,
"name": "Item 3",
"price": "$3"
},
{
"id": 4,
"name": "Item 4",
"price": "$4"
},
{
"id": 5,
"name": "Item 5",
"price": "$5"
},
{
"id": 6,
"name": "Item 6",
"price": "$6"
},
{
"id": 7,
"name": "Item 7",
"price": "$7"
},
{
"id": 8,
"name": "Item 8",
"price": "$8"
},
{
"id": 9,
"name": "Item 9",
"price": "$9"
},
{
"id": 10,
"name": "Item 10",
"price": "$10"
},
{
"id": 11,
"name": "Item 11",
"price": "$11"
},
{
"id": 12,
"name": "Item 12",
"price": "$12"
},
{
"id": 13,
"name": "Item 13",
"price": "$13"
},
{
"id": 14,
"name": "Item 14",
"price": "$14"
},
{
"id": 15,
"name": "Item 15",
"price": "$15"
},
{
"id": 16,
"name": "Item 16",
"price": "$16"
},
{
"id": 17,
"name": "Item 17",
"price": "$17"
},
{
"id": 18,
"name": "Item 18",
"price": "$18"
},
{
"id": 19,
"name": "Item 19",
"price": "$19"
},
{
"id": 20,
"name": "Item 20",
"price": "$20"
}
]
});
//操作欄的格式化
// 定義刪除、更新操作
function option(value, row, index) {
var htm = '<button id="delUser" userId=' +
value +
' onclick="delUser(this)">刪除</button><button id="dupUser" onclick="updUser(' +
value + ')">修改</button>'
return htm;
}
// 刪除用戶
function delUser(dom) {
var mymessage = confirm("確認刪除嘛？");
if(mymessage == true) {
$.ajax({
url: path + '/user/' + $(dom).attr("userId"),
type: 'delete',
success: function(data) {
$(dom).parent().parent().hide();
},
error: function(data) {
alert("服務器繁忙")
}
});
}
}
// 編輯用戶
function updUser(id) {
layer.open({
type: 2,
title: '編輯用戶',
area: ['500px', '440px'],
fix: false, //
content: path + '/xxx/xxxxUpd/' + id,
end: function() {
$("#mytab").bootstrapTable('refresh', {
url: path + "/xx/list"
});
}
});
}
</script>
</body>
</html>
原文作者：祈澈姑娘 技術博客：https://www.jianshu.com/u/05f416aefbe1
90後前端妹子，愛編程，愛運營，文藝與代碼齊飛，魅力與智慧共存的程序媛一枚。
堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，對於博客上面有不會的問題，可以加入qq技術交流羣聊：260352626。