相关文档
步骤:
1:引入Bootstrap Table表格插件相关链接:这里直接拿来用就可以了,如果要下载到本地,可以自行去官网下载。
2:实现一个简单的表格和分页
如果不会可以参考这篇教程:
https://www.jianshu.com/p/b5ca011a0d9c
自己写了一个json格式的数据,进行模拟
4:可复制黏贴的代码:
html>
导出表格
$('#mytab').bootstrapTable({
url: 'data1.json',
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: '角色'
},
{
field: 'price',
title: '操作',
width: 120,
align: 'center',
valign: 'middle',
formatter: actionFormatter,
},
]
});
//操作栏的格式化
function actionFormatter(value, row, index) {
var id = value;
var result = "";
result += "";
result += "";
result += "";
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 = '
',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))
}
})()
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": "项羽",
"price": "$20"
}
]
导出当前选中页码的表格(这是第一页的数据)