前言：BootstrapTable基於Bootstrap，Bootstrap基於jquery，所以需要引入jquery后再引入bootstrap。
<link href="${ctx}/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="${ctx}/assets/plugins/bootstrap-datatable/bootstrap-table.min.css">
<script src="${ctx}/assets/plugins/jquery/jquery-2.1.4.min.js"></script>
<script src="${ctx}/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="${ctx}/assets/plugins/bootstrap-datatable/bootstrap-table.min.js"></script>
<script src="${ctx}/assets/plugins/bootstrap-datatable/bootstrap-table-zh-CN.min.js"></script>
<link rel="stylesheet" href="${ctx}/assets/font/font-awesome/4.5.0/css/font-awesome.min.css"> //icon：官網
通過 JavaScript 的方式
通過表格 id 來啟用 bootstrap table。
文檔鏈接戳這里。
<div class="box-body">
<div id="toorbar" class="btn-group">
<shiro:hasPermission name="admin:ordervip:create">
<button id="addBtn" type="button" class="btn btn-default">
<i class="glyphicon glyphicon-plus"></i>新增訂單
</button>
</shiro:hasPermission>
</div>
<table id="table"></table>
</div>
function initTable() {
$("#table").bootstrapTable({
url: "${aapi}/orderVip/list", //服務器數據加載地址，與末尾sidePagination參數設置為server對應。
columns: [{ //列配置項,橙名為列參數，本文介紹有限，具體有哪些可以詳細看文檔介紹。
field: 'orderNo',
title: '訂單編號',
formatter: function(value, row, index) { // value:field的值,row:行數據，用row.createdDtm找發起時間字段,index:行下標
return [
'<shiro:hasPermission name="admin:ordervip:detail">
<a class="detail ml10" href="javascript:void(0)" title="訂單詳情">',
value, '</a></shiro:hasPermission>',
'<shiro:lacksPermission name="admin:ordervip:detail">', value,
'</shiro:lacksPermission>'
].join('');
},
events: {
'click .detail': function(e, value, row, index) {
$.FORM.showFormDialog({ //bootstrap-dialog與app-jquery-dialog.js結合使用，下面的文章中詳細闡述。
title: "訂單詳情",
isReadOnly: true,
dataSource: "${aapi}/orderVip/detail/2/" + row.orderNo,
templateUrl: '${aapi}/page/custom/vipOrderDetail'
});
}
}
}, {
field: 'createdDtm',
title: '發起時間'
}, {
field: 'cusName',
title: '發起人'
}, {
field: 'splitDtm',
title: '拆單時間'
}, {
field: 'splitnum',
title: '拆單數量'
}, {
field: 'type',
title: '類型',
formatter: function(value, row, index) {
if(value == '0') {
return "維修";
}
if(value == '1') {
return "搬運";
}
if(value == "1,0") {
return "搬運，維修"
}
}
}, {
field: 'state',
title: '訂單狀態',
formatter: function(value, row, index) {
if(typeof(value) == 'undefined' || value == "0") {
return "未拆分";
}
if(value == '1') {
return "已拆分";
}
}
}, {
field: 'remark',
title: '備注'
}, {
field: 'file',
title: '文件',
formatter: function(value, row, index) {
if(row.orderFile == undefined) {
return "--";
} else {
return '<shiro:hasPermission name="admin:ordervip:download"><a class="download ml10" href="javascript:void(0)" title="下載表格"> <i class="fa fa-file-o" aria-hidden="true"></i></a></shiro:hasPermission>';
}
},
events: {
'click .download': function(e, value, row, index) {
window.open('${aapi}/orderVip/downLoad/' + row.orderNo, '_self');
}
}
}, {
field: 'opt',
title: '操作',
formatter: function(value, row, index) {
return [
'<shiro:hasPermission name="admin:ordervip:splitorder">
<a class="split ml10" href="javascript:void(0)" title="拆分訂單">
<i class ="fa fa-wrench" aria-hidden="true"></i></a></shiro:hasPermission>',
'<shiro:hasPermission name="admin:ordervip:update">
<a class="edit ml10" href="javascript:void(0)" title="修改訂單">
<i class="glyphicon glyphicon-edit"></i></a></shiro:hasPermission>',
'<shiro:hasPermission name="admin:ordervip:delete">
<a class="cancel ml10" href="javascript:void(0)" title="取消訂單">
<i class="glyphicon glyphicon-ban-circle"></i></a></shiro:hasPermission>'
].join('');
}, //紫色為添加圖標（icon），插件：font-awesome，效果圖見底部。
events: {
'click .split': function(e, value, row, index) {
$.FORM.showFormDialog({
title: "拆分VIP訂單",
isReadOnly: true,
dataSource: "${aapi}/orderVip/detail/2/" + row.orderNo,
templateUrl: '${aapi}/page/custom/vipOrderSplit'
});
},
'click .edit': function(e, value, row, index) {
if(row.state == '1') {
$.NOTIFY.showNotice('提示', '不能修改已拆分的訂單！');
} else {
$.FORM.showFormDialog({
title: "修改VIP訂單",
postUrl: "${aapi}/orderVip/update",
dataSource: "${aapi}/orderVip/detail/2/" + row.orderNo,
isReadOnly: false,
templateUrl: '${aapi}/page/custom/vipModifyForm',
formId: "#vipForm",
postType: "multipart",
data: {
pid: 0,
pname: "--",
level: 0
},
onPostSuccess: function() {
$("#table").bootstrapTable("refresh");
}
});
}
},
'click .cancel': function(e, value, row, index) {
if(row.state == '1') {
$.NOTIFY.showNotice('提示', '不能刪除已拆分的訂單！');
} else {
$.FORM.showConfirm({
title: "提示",
message: "您確認要取消訂單【" + row.orderNo + "】？",
url: "${aapi}/orderVip/delete/" + row.orderNo,
autoClose: true,
successTitle: "成功",
successMessage: "訂單【" + row.orderNo + "】已取消！",
onSuccess: function() {
$("#table").bootstrapTable("refresh");
}
});
}
}
}
}],
queryParams: function(params) {
return $.extend({}, params, searchformData); //請求服務器數據時，你可以通過重寫參數的方式添加一些額外的參數，本項目中用於自定義表格的查詢，於別的文章詳細闡述。
},
toolbar: "#toolbar", //一個jQuery 選擇器，指明自定義的toolbar（工具欄），將需要的功能放置在表格工具欄（默認）位置。
sidePagination: "server", //設置在哪里進行分頁，可選值為 'client' 或者 'server'。設置 'server'時，必須設置 服務器數據地址（url）或者重寫ajax方法
pageNumber: 1, //如果設置了分頁，首頁頁碼
pageSize: 10, //如果設置了分頁，頁面數據條數
pageList: [
10, 20, 50, 100, 200 //如果設置了分頁，設置可供選擇的頁面數據條數。設置為All 則顯示所有記錄。
],
pagination: true, //設置為 true 會在表格底部顯示分頁條
showRefresh: true, //顯示 刷新按鈕
showColumns: true, //是否顯示 內容列下拉框
searchOnEnterKey: true, //設置為 true時，按回車觸發搜索方法，否則自動觸發搜索方法
search:true //是否啟用搜索框
});
}
initTable();
分頁使用后台代碼寫，並且返回參數order=asc&limit=10&offset=0（正序，10條，從0開始），不懂這些值是怎么設置的= =
url: http://127.0.0.1:8081/piano/a/orderVip/list?order=asc&limit=10&offset=0
請求成功后的表格如下圖所示：
（本篇內容還結合了bootstrap-dialog的內容。在接下來的文章中詳細介紹。）