本文是一个示例,介绍怎样多列排序,官网API介绍的不够详细。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Dashboard | Nadhif - Responsive Admin Template</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css">
<link href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>
<script type="text/javascript" src="bootstrap-table-multiple-sort.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, // 是否启用排序
showMultiSort: true, // 多列排序
columns: [{
field: 'id',
title: '登录名',
sortable: true
},
{
field: 'name',
title: '昵称',
sortable: true
},
{
field: 'price',
title: '角色',
sortable: true
}, {
title: '操作',
field: 'id',
sortable: true,
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"
}
],
onSort: function (name, order) {
console.log(name, order)
},
onMultipleSort: function (name, order) {
console.log(this.sortPriority)
console.log(order)
}
});
//操作栏的格式化
// 定义删除、更新操作
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>
关键引入 这里官网API有相应的地址,我就不在过多叙述