Bootstrap Table表格分页的使用及分页数据（Excel）导出

2023-03-21 12:59| 来源: 网络整理| 查看: 265

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

2：实现一个简单的表格和分页如果不会可以参考这篇教程： https://cloud.tencent.com/developer/article/1140283 自己写了一个json格式的数据，进行模拟

3：前端js实现打印（导出）excel表格参考：https://cloud.tencent.com/developer/article/1141382

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 = '{table}', 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" } ]

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

原文作者：祈澈姑娘 90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，对于博客上面有不会的问题，可以加入qq技术交流群聊：649040560。

【本文地址】

公司简介

联系我们