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

心已赠人 2022-10-12 01:26 18阅读 0赞

\#\#\#\#相关文档

> Bootstrap Table官网：[http://bootstrap-table.wenzhixin.net.cn/zh-cn/][http_bootstrap-table.wenzhixin.net.cn_zh-cn]  
> Bootstrap 中文网：http://www.bootcss.com/  
> Bootstrap Table Demo：http://issues.wenzhixin.net.cn/bootstrap-table/index.html

\#\#\#\#步骤：

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

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

3：前端js实现打印（导出）excel表格  
参考：https://www.jianshu.com/p/b5bcee88cf40

4：可复制黏贴的代码：  
![8179ea119f9f1a61e53f1af34f2216a2.png][]

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		
    	</head>
    	<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    	
    	<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
    	
    	<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>
    
    	
    	<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
    	
    	<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')">导出表格</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, // 是否分页
    				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": "项羽",  
                "price": "$20"  
            }  
        ]

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

![cfbb430ce69929aa4c4dd1feb0c883dd.png][]

--------------------

例子2：  
html

以上url里面的json数据

效果  
![dc8441737409e8aab91eb6ad205c0372.png][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]

[http_bootstrap-table.wenzhixin.net.cn_zh-cn]: http://bootstrap-table.wenzhixin.net.cn/zh-cn/
[8179ea119f9f1a61e53f1af34f2216a2.png]: /images/20221005/38837c8106b2471b8b69bbaf6472c5b7.png
[cfbb430ce69929aa4c4dd1feb0c883dd.png]: /images/20221005/022f24cb5a384b77850b99325c503a17.png
[dc8441737409e8aab91eb6ad205c0372.png]: /images/20221005/2bff9c4a42274dbe929f7d3510f0e84c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]: /images/20221005/a1e576e6e7974d50a297e71e6d833b4b.png