Bootstrap Table表格分页的使用及分页数据（Exce

作者: 祈澈菇凉 | 来源:发表于2021-06-28 15:46 被阅读0次

Bootstrap Table表格分页的使用及分页数据（Exce
Vue框架Element UI教程-axios表格分页（九）
坑
Bootstrap Table通过JS生成数据源并且加载到表格中
element-ui中table组件-高度做适配
Bootstrap-table分页表格用法
表格与表单
bootstrap-table 服务器分页（spring 后台
表格插件-bootstrap table的分页使用示例
前端分页插件twbsPagination（非AJAX）

步骤：

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

    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入bootstrap-table样式 -->
    <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" 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>
    <!-- 引入中文语言包 -->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>

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

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

4：可复制黏贴的代码：

<!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">
    <!-- 引入bootstrap-table样式 -->
    <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" 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>
    <!-- 引入中文语言包 -->
    <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"  
        }  
    ]

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

例子2：
html

<!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">
    <!-- 引入bootstrap-table样式 -->
    <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" 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>
    <!-- 引入中文语言包 -->
    <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",// 请求路径
                striped: true, // 是否显示行间隔色
                pageNumber: 1, // 初始化加载第一页
                pagination: true,// 是否分页
                sidePagination: 'server',// server:服务器端分页|client：前端分页
                pageSize: 15,// 单页记录数
                queryParams: function (params) {// 上传服务器的参数
                    var temp = {// 如果是在服务器端实现分页，limit、offset这两个参数是必须的
                            
                                                                        
                            "pageBean.page": (params.offset / params.limit) + 1, // 当前页码
                            "pageBean.rows": params.limit, // 每页显示数量               
                            "pageBean.pagination": true
                    };
                    return temp;
                },
                columns: [{
                    checkbox: true
                }, {
                    title: 'id',
                    field: 'id',
                    visible: false
                }, {
                    title: '预约时间',
                    field: 'visitTime',
                }, {
                    title: '姓名',
                    field: 'name',
                }, {
                    title: '性别',
                    field: 'sex',
                    
                }, {
                    title: '证件号码',
                    field: 'card',
                }, {
                    title: '联系电话',
                    field: 'phone',
                }, 
                 {
                    title: '被访姓名',
                    field: 'viewPeople',
                    
                },{
                    title: '申请时间',
                    field: 'applyTime',
                }, {
                    title: '来访事由',
                    field: 'viewReason',
                    
                }, {
                    title: '离场时间',
                    field: 'leaveTime',
                    
                }]
            })
        </script>
    </body>

</html>

以上url里面的json数据

{"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":"来访事由","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":"问我","sex":1,"visitReason":"来访事由","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}]}

效果

Bootstrap Table表格分页的使用及分页数据（Exce
相关文档 Bootstrap Table官网：http://bootstrap-table.wenzhixin.n...
Vue框架Element UI教程-axios表格分页（九）
今天来写一个分页，表格分页在实际项目中经常用到，之前也写过关与bootstrap table 里面的表格分页，道理...
坑
bootstrap table后端分页，请求数据成功，页面不显示，报错Object.entries is not ...
Bootstrap Table通过JS生成数据源并且加载到表格中
之前使用Bootstrap Table做的功能一直是通过服务器接口请求数据填充到表格中，分页也是在服务器端实现，今...
element-ui中table组件-高度做适配
使用element-ui中table组件与Pagination分页组件时, 由于分页可设置页面展示条数，那么表格的...
Bootstrap-table分页表格用法
记录一下我今天学习Bootstrap-table的用法。使用的是后台分页，排序和分页都是前台传字段给后台，后台处理...
表格与表单
表格 table常用标签 table常用属性传统布局表单分页
bootstrap-table 服务器分页（spring 后台
最近前端都是用的bootstrap table这个插件，客户端分页的话数据量一多交互不好，所以大数据量的分页都用服...
表格插件-bootstrap table的分页使用示例
1：在官网上下载相关的文件之后，步骤下载之后引入： 2：html界面 3：js代码 4：完整的添加数据之后显示在表...
前端分页插件twbsPagination（非AJAX）
1. 引入twbsPagination的js 2. Table下加入分页区域，使用BootStrap样式 3. 书...