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

编程微刊

于 2019-03-12 09:48:08 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/qq_38822390/article/details/88414422

版权

本文介绍了如何在Bootstrap Table中实现表格分页，并提供了详细的教程链接。此外，还分享了如何通过前端JS实现表格数据的Excel导出功能，提供了一个模拟JSON数据示例，以及可复制的代码片段。作者祈澈姑娘是一位90后前端开发者，乐于分享技术问题和解决方案。

摘要由CSDN通过智能技术生成

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/bootstr