bootstraptable 分页循环_Bootstrap Table表格分页的使用及分页数据（Excel）导出

相关文档

步骤：

1:引入Bootstrap Table表格插件相关链接：这里直接拿来用就可以了，如果要下载到本地，可以自行去官网下载。

2：实现一个简单的表格和分页

如果不会可以参考这篇教程：

https://www.jianshu.com/p/b5ca011a0d9c

自己写了一个json格式的数据，进行模拟

4：可复制黏贴的代码：

导出表格

$('#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"

}

]

导出当前选中页码的表格(这是第一页的数据)

原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1

90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。

坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，对于博客上面有不会的问题，可以加入qq技术交流群聊：649040560。