Bootstrap Table表格分页的使用及分页数据(Excel)导出

简介: Bootstrap Table表格分页的使用及分页数据(Excel)导出
步骤:

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:实现一个简单的表格和分页

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

3:前端js实现打印(导出)excel表格

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月前
|
数据采集 数据可视化 数据挖掘
利用Python自动化处理Excel数据:从基础到进阶####
本文旨在为读者提供一个全面的指南,通过Python编程语言实现Excel数据的自动化处理。无论你是初学者还是有经验的开发者,本文都将帮助你掌握Pandas和openpyxl这两个强大的库,从而提升数据处理的效率和准确性。我们将从环境设置开始,逐步深入到数据读取、清洗、分析和可视化等各个环节,最终实现一个实际的自动化项目案例。 ####
366 10
|
4天前
|
分布式计算 Hadoop 大数据
从Excel到Hadoop:数据规模的进化之路
从Excel到Hadoop:数据规模的进化之路
34 10
|
16天前
|
文字识别 BI
【图片型PDF】批量识别扫描件PDF指定区域局部位置内容,将识别内容导出Excel表格或批量改名文件,基于阿里云OCR对图片型PDF识别改名案例实现
在医疗和政务等领域,图片型PDF文件(如病历、报告、公文扫描件)的处理需求广泛。通过OCR技术识别这些文件中的文字信息,提取关键内容并保存为表格,极大提高了信息管理和利用效率。本文介绍一款工具——咕嘎批量OCR系统,帮助用户快速处理图片型PDF文件,支持区域识别、内容提取、导出表格及批量改名等功能。下载工具后,按步骤选择处理模式、进行区域采样、批量处理文件,几分钟内即可高效完成数百个文件的处理。
86 8
|
2月前
|
存储 Java easyexcel
招行面试:100万级别数据的Excel,如何秒级导入到数据库?
本文由40岁老架构师尼恩撰写,分享了应对招商银行Java后端面试绝命12题的经验。文章详细介绍了如何通过系统化准备,在面试中展示强大的技术实力。针对百万级数据的Excel导入难题,尼恩推荐使用阿里巴巴开源的EasyExcel框架,并结合高性能分片读取、Disruptor队列缓冲和高并发批量写入的架构方案,实现高效的数据处理。此外,文章还提供了完整的代码示例和配置说明,帮助读者快速掌握相关技能。建议读者参考《尼恩Java面试宝典PDF》进行系统化刷题,提升面试竞争力。关注公众号【技术自由圈】可获取更多技术资源和指导。
N..
|
9月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
88 0
|
前端开发 容器
|
前端开发 容器
|
前端开发 开发者 容器
|
7月前
|
开发框架 前端开发 JavaScript
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
|
前端开发