Use of Bootstrap Table pagination and export of pagination data (Excel)

1: introduce the relevant links of the Bootstrap Table plug-in: it can be used directly here. If you want to download it locally, you can go to the official website to download it.

    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <!-- Introduce bootstrap-table style -->
    <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
    <!-- jquery and 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>
    <!-- Introduce Chinese language pack -->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>

2: implement a simple table and paging
If you can't refer to this tutorial:
https://www.jianshu.com/p/b5ca011a0d9c
I wrote a json format data for simulation

3: printing (exporting) excel table with front-end js
Reference resources: https://www.jianshu.com/p/b5bcee88cf40

4: code that can be copied and pasted:


<!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">
    <!-- Introduce bootstrap-table style -->
    <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
    <!-- jquery and 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>
    <!-- Introduce Chinese language pack -->
    <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')">Export table</button>
        </div>

        <table id="mytab" class="table table-hover"></table>
        <script>
            $('#mytab').bootstrapTable({
                url: 'data1.json',
                queryParams: "queryParams",
                toolbar: "#toolbar",
                sidePagination: "true",
                striped: true, // Display color separation between lines
                //search : "true",
                uniqueId: "ID",
                pageSize: "5",
                pagination: true, // Paging
                sortable: true, // Enable sorting or not
                columns: [{
                        field: 'id',
                        title: 'Login name'
                    },
                    {
                        field: 'name',
                        title: 'Nickname?'
                    },
                    {
                        field: 'price',
                        title: 'role'
                    },
                    {
                        field: 'price',
                        title: 'operation',
                        width: 120,
                        align: 'center',
                        valign: 'middle',
                        formatter: actionFormatter,
                    },

                ]
            });
            //Formatting the action bar
            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='See'><span class='glyphicon glyphicon-search'></span></a>";
                result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='edit'><span class='glyphicon glyphicon-pencil'></span></a>";
                result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='delete'><span class='glyphicon glyphicon-remove'></span></a>";
                return result;
            }

            //Print form
            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": "Gao Jianli",  
            "price": "$0"  
        },  
        {  
            "id": 1,  
            "name": "Wang Zhaojun",  
            "price": "$1"  
        },  
        {  
            "id": 2,  
            "name": "Angela",  
            "price": "$2"  
        },  
        {  
            "id": 3,  
            "name": "Cai Wenji",  
            "price": "$3"  
        },  
        {  
            "id": 4,  
            "name": "Sun Shang Xiang",  
            "price": "$4"  
        },  
        {  
            "id": 5,  
            "name": "Zhen Ji",  
            "price": "$5"  
        },  
        {  
            "id": 6,  
            "name": "Da Ji",  
            "price": "$6"  
        },  
        {  
            "id": 7,  
            "name": "Millay",  
            "price": "$7"  
        },  
        {  
            "id": 8,  
            "name": "Big Joe",  
            "price": "$8"  
        },  
        {  
            "id": 9,  
            "name": "Small and exquisite",  
            "price": "$9"  
        },  
        {  
            "id": 10,  
            "name": "Zhang Liang",  
            "price": "$10"  
        },  
        {  
            "id": 11,  
            "name": "Zhu Geliang",  
            "price": "$11"  
        },  
        {  
            "id": 12,  
            "name": "Hanxin",  
            "price": "$12"  
        },  
        {  
            "id": 13,  
            "name": "Lan Ling Wang",  
            "price": "$13"  
        },  
        {  
            "id": 14,  
            "name": "army officer's hat ornaments",  
            "price": "$14"  
        },  
        {  
            "id": 15,  
            "name": "Offspring",  
            "price": "$15"  
        },  
        {  
            "id": 16,  
            "name": "Huang Zhong",  
            "price": "$16"  
        },  
        {  
            "id": 17,  
            "name": "Yu Ji",  
            "price": "$17"  
        },  
        {  
            "id": 18,  
            "name": "Cheng bite Jin",  
            "price": "$18"  
        },  
        {  
            "id": 19,  
            "name": "Daoist philosopher",  
            "price": "$19"  
        },  
        {  
            "id": 20,  
            "name": "Xiang Yu",  
            "price": "$20"  
        }  
    ]  

Export the table with the currently selected page number (this is the data of the first page)

Original author: qiche girl technology blog: https://www.jianshu.com/u/05f416aefbe1
Post-90s front-end sister, love programming, love operation, literature and code fly together, charm and wisdom coexist.
Insist on summing up the technical problems encountered in the work and recording what you think and see in the work. For the problems on the blog, you can join qq technical exchange group chat: 649040560.

Tags: JQuery Excel JSON Javascript

Posted on Sun, 01 Dec 2019 15:26:00 -0800 by Tracekill