相關(guān)文檔
Bootstrap Table官網(wǎng)：http://bootstrap-table.wenzhixin.net.cn/zh-cn/
Bootstrap 中文網(wǎng)：http://www.bootcss.com/
Bootstrap Table Demo：http://issues.wenzhixin.net.cn/bootstrap-table/index.html
步驟：
1:引入Bootstrap Table表格插件相關(guān)鏈接：這里直接拿來(lái)用就可以了，如果要下載到本地，可以自行去官網(wǎng)下載铭乾。
<link rel="stylesheet">
<!-- 引入bootstrap-table樣式 -->
<link rel="stylesheet">
<!-- jquery及bootstrapjs -->
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- bootstrap-table.min.js -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<!-- 引入中文語(yǔ)言包 -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
2：實(shí)現(xiàn)一個(gè)簡(jiǎn)單的表格和分頁(yè)
如果不會(huì)可以參考這篇教程：
http://www.reibang.com/p/b5ca011a0d9c
自己寫(xiě)了一個(gè)json格式的數(shù)據(jù)，進(jìn)行模擬
3：前端js實(shí)現(xiàn)打映窝簟（導(dǎo)出）excel表格
參考：http://www.reibang.com/p/b5bcee88cf40
4：可復(fù)制黏貼的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<link rel="stylesheet">
<!-- 引入bootstrap-table樣式 -->
<link rel="stylesheet">
<!-- jquery及bootstrapjs -->
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- bootstrap-table.min.js -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<!-- 引入中文語(yǔ)言包 -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
<body>
<div class="tools">
<button type="button" class="btn green" id="excell" onclick="method5('mytab')">導(dǎo)出表格</button>
</div>
<table id="mytab" class="table table-hover"></table>
<script>
$('#mytab').bootstrapTable({
url: 'data1.json',
queryParams: "queryParams",
toolbar: "#toolbar",
sidePagination: "true",
striped: true, // 是否顯示行間隔色
//search : "true",
uniqueId: "ID",
pageSize: "5",
pagination: true, // 是否分頁(yè)
sortable: true, // 是否啟用排序
columns: [{
field: 'id',
title: '登錄名'
},
{
field: 'name',
title: '昵稱'
},
{
field: 'price',
title: '角色'
},
{
field: 'price',
title: '操作',
width: 120,
align: 'center',
valign: 'middle',
formatter: actionFormatter,
},
]
});
//操作欄的格式化
function actionFormatter(value, row, index) {
var id = value;
var result = "";
result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='編輯'><span class='glyphicon glyphicon-pencil'></span></a>";
result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='刪除'><span class='glyphicon glyphicon-remove'></span></a>";
return result;
}
//打印表格
var idTmr;
function getExplorer() {
var explorer = window.navigator.userAgent;
//ie
if(explorer.indexOf("MSIE") >= 0) {
return 'ie';
}
//firefox
else if(explorer.indexOf("Firefox") >= 0) {
return 'Firefox';
}
//Chrome
else if(explorer.indexOf("Chrome") >= 0) {
return 'Chrome';
}
//Opera
else if(explorer.indexOf("Opera") >= 0) {
return 'Opera';
}
//Safari
else if(explorer.indexOf("Safari") >= 0) {
return 'Safari';
}
}
function method5(tableid) {
if(getExplorer() == 'ie') {
var curTbl = document.getElementById(tableid);
var oXL = new ActiveXObject("Excel.Application");
var oWB = oXL.Workbooks.Add();
var xlsheet = oWB.Worksheets(1);
var sel = document.body.createTextRange();
sel.moveToElementText(curTbl);
sel.select();
sel.execCommand("Copy");
xlsheet.Paste();
oXL.Visible = true;
try {
var fname = oXL.Application.GetSaveAsFilename("Excel.xls",
"Excel Spreadsheets (*.xls), *.xls");
} catch(e) {
print("Nested catch caught " + e);
} finally {
oWB.SaveAs(fname);
oWB.Close(savechanges = false);
oXL.Quit();
oXL = null;
idTmr = window.setInterval("Cleanup();", 1);
}
} else {
tableToExcel(tableid)
}
}
function Cleanup() {
window.clearInterval(idTmr);
CollectGarbage();
}
var tableToExcel = (function() {
var uri = 'data:application/vnd.ms-excel;base64,',
template = '<html><head><meta charset="UTF-8"></head><body><table border="1">{table}</table></body></html>',
base64 = function(
s) {
return window.btoa(unescape(encodeURIComponent(s)))
},
format = function(s, c) {
return s.replace(/{(\w+)}/g, function(m, p) {
return c[p];
})
}
return function(table, name) {
if(!table.nodeType)
table = document.getElementById(table)
var ctx = {
worksheet: name || 'Worksheet',
table: table.innerHTML
}
window.location.href = uri + base64(format(template, ctx))
}
})()
</script>
</body>
</html>
data1.json
[
{
"id": 0,
"name": "高漸離",
"price": "$0"
},
{
"id": 1,
"name": "王昭君",
"price": "$1"
},
{
"id": 2,
"name": "安琪拉",
"price": "$2"
},
{
"id": 3,
"name": "蔡文姬",
"price": "$3"
},
{
"id": 4,
"name": "孫尚香",
"price": "$4"
},
{
"id": 5,
"name": "甄姬",
"price": "$5"
},
{
"id": 6,
"name": "妲己",
"price": "$6"
},
{
"id": 7,
"name": "米萊地",
"price": "$7"
},
{
"id": 8,
"name": "大喬",
"price": "$8"
},
{
"id": 9,
"name": "小巧",
"price": "$9"
},
{
"id": 10,
"name": "張亮",
"price": "$10"
},
{
"id": 11,
"name": "諸葛亮",
"price": "$11"
},
{
"id": 12,
"name": "韓信",
"price": "$12"
},
{
"id": 13,
"name": "蘭陵王",
"price": "$13"
},
{
"id": 14,
"name": "貂蟬",
"price": "$14"
},
{
"id": 15,
"name": "后裔",
"price": "$15"
},
{
"id": 16,
"name": "黃忠",
"price": "$16"
},
{
"id": 17,
"name": "虞姬",
"price": "$17"
},
{
"id": 18,
"name": "程咬金",
"price": "$18"
},
{
"id": 19,
"name": "莊周",
"price": "$19"
},
{
"id": 20,
"name": "項(xiàng)羽",
"price": "$20"
}
]
導(dǎo)出當(dāng)前選中頁(yè)碼的表格（這是第一頁(yè)的數(shù)據(jù)）
例子2：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<link rel="stylesheet">
<!-- 引入bootstrap-table樣式 -->
<link rel="stylesheet">
<!-- jquery及bootstrapjs -->
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- bootstrap-table.min.js -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<!-- 引入中文語(yǔ)言包 -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
<body>
<table id="mytab" class="table table-hover"></table>
<script>
$('#mytab').bootstrapTable({
method: 'get',
url: "http://192.xxx.4.xxx:8093/chemApp/caller/getCallers.action",// 請(qǐng)求路徑
striped: true, // 是否顯示行間隔色
pageNumber: 1, // 初始化加載第一頁(yè)
pagination: true,// 是否分頁(yè)
sidePagination: 'server',// server:服務(wù)器端分頁(yè)|client：前端分頁(yè)
pageSize: 15,// 單頁(yè)記錄數(shù)
queryParams: function (params) {// 上傳服務(wù)器的參數(shù)
var temp = {// 如果是在服務(wù)器端實(shí)現(xiàn)分頁(yè)，limit、offset這兩個(gè)參數(shù)是必須的
"pageBean.page": (params.offset / params.limit) + 1, // 當(dāng)前頁(yè)碼
"pageBean.rows": params.limit, // 每頁(yè)顯示數(shù)量
"pageBean.pagination": true
};
return temp;
},
columns: [{
checkbox: true
}, {
title: 'id',
field: 'id',
visible: false
}, {
title: '預(yù)約時(shí)間',
field: 'visitTime',
}, {
title: '姓名',
field: 'name',
}, {
title: '性別',
field: 'sex',
}, {
title: '證件號(hào)碼',
field: 'card',
}, {
title: '聯(lián)系電話',
field: 'phone',
},
{
title: '被訪姓名',
field: 'viewPeople',
},{
title: '申請(qǐng)時(shí)間',
field: 'applyTime',
}, {
title: '來(lái)訪事由',
field: 'viewReason',
}, {
title: '離場(chǎng)時(shí)間',
field: 'leaveTime',
}]
})
</script>
</body>
</html>
以上url里面的json數(shù)據(jù)
{"msg":"查詢成功","total":15,"code":1,"rows":[{"id":2,"deviceId":"44100AE7ECB4","name":"caller_upd","sex":1,"visitReason":null,"viewReason":"1","viewPeople":"890","card":"432228202101018001","isLeave":0,"phone":"","visitTime":1614580600000,"organId":0,"fenceId":null,"headUrl":"http://images/cmao.jpg","leaveTime":1615268534000,"pageBean":null},{"id":6,"deviceId":"00000383","name":"李源","sex":1,"visitReason":null,"viewReason":"1","viewPeople":"John lee","card":"432228202101018001","isLeave":0,"phone":"18117166505","visitTime":1618552142056,"organId":0,"fenceId":null,"headUrl":"/chem/images/cmao.jpg","leaveTime":0,"pageBean":null},{"id":9,"deviceId":"1111111","name":"訪客001","sex":0,"visitReason":"來(lái)訪事由","viewReason":"1","viewPeople":"張龍","card":"432228202101018001","isLeave":0,"phone":"17878742778","visitTime":1621328848000,"organId":0,"fenceId":null,"headUrl":"","leaveTime":0,"pageBean":null},{"id":10,"deviceId":"21212222","name":"21212","sex":1,"visitReason":null,"viewReason":"1","viewPeople":"21212","card":"340823199508151523","isLeave":0,"phone":"13661725475","visitTime":1623054050314,"organId":0,"fenceId":null,"headUrl":"/chem/images/cmao.jpg","leaveTime":0,"pageBean":null},{"id":11,"deviceId":"33333333333333","name":"33","sex":1,"visitReason":null,"viewReason":"1","viewPeople":"333","card":"340823199508151523","isLeave":0,"phone":"13661725475","visitTime":1623055766879,"organId":0,"fenceId":null,"headUrl":"/chem/images/cmao.jpg","leaveTime":0,"pageBean":null},{"id":12,"deviceId":"22333333","name":"3","sex":1,"visitReason":null,"viewReason":"1","viewPeople":"3","card":"340823199508151523","isLeave":0,"phone":"13661725475","visitTime":1623059682935,"organId":0,"fenceId":null,"headUrl":"/chem/images/cmao.jpg","leaveTime":0,"pageBean":null},{"id":13,"deviceId":"0000089","name":"zs","sex":1,"visitReason":null,"viewReason":"1","viewPeople":"ls","card":"428823188809098110","isLeave":0,"phone":"17878234567","visitTime":1623143962000,"organId":0,"fenceId":null,"headUrl":null,"leaveTime":1624607416000,"pageBean":null},{"id":14,"deviceId":"00000000000","name":"問(wèn)我","sex":1,"visitReason":"來(lái)訪事由","viewReason":"1","viewPeople":"890","card":"432228202101018001","isLeave":0,"phone":"17878742778","visitTime":1623827185000,"organId":0,"fenceId":null,"headUrl":"/chem/images/cmao.jpg","leaveTime":0,"pageBean":null},{"id":15,"deviceId":"undefined","name":"12","sex":0,"visitReason":null,"viewReason":"0","viewPeople":"21","card":"21","isLeave":0,"phone":"21","visitTime":1624262495000,"organId":0,"fenceId":null,"headUrl":null,"leaveTime":0,"pageBean":null},{"id":16,"deviceId":"9999999","name":"","sex":0,"visitReason":null,"viewReason":"0","viewPeople":"","card":"","isLeave":0,"phone":"","visitTime":1624262552000,"organId":0,"fenceId":null,"headUrl":null,"leaveTime":0,"pageBean":null},{"id":17,"deviceId":"43434343","name":"ww11","sex":1,"visitReason":null,"viewReason":"1","viewPeople":"李俊飛2","card":"340823199308151525","isLeave":0,"phone":"13661725175","visitTime":1624263783000,"organId":0,"fenceId":null,"headUrl":null,"leaveTime":0,"pageBean":null},{"id":18,"deviceId":"wqwq","name":"","sex":0,"visitReason":null,"viewReason":"0","viewPeople":"","card":"","isLeave":0,"phone":"","visitTime":1624423217000,"organId":0,"fenceId":null,"headUrl":null,"leaveTime":0,"pageBean":null},{"id":19,"deviceId":"12121212","name":"","sex":0,"visitReason":null,"viewReason":"0","viewPeople":"","card":"","isLeave":0,"phone":"","visitTime":1624423320000,"organId":0,"fenceId":null,"headUrl":null,"leaveTime":0,"pageBean":null},{"id":20,"deviceId":"81358900","name":"","sex":0,"visitReason":null,"viewReason":"0","viewPeople":"","card":"","isLeave":0,"phone":"","visitTime":1624423546000,"organId":0,"fenceId":null,"headUrl":null,"leaveTime":0,"pageBean":null},{"id":21,"deviceId":"2121","name":"","sex":0,"visitReason":null,"viewReason":"0","viewPeople":"","card":"","isLeave":0,"phone":"","visitTime":1624424660000,"organId":0,"fenceId":null,"headUrl":null,"leaveTime":0,"pageBean":null}]}
效果
