Bootstrap Table表格插件的使用及数据导出

关注

转载最新推荐文章于 2026-07-16 11:39:15 发布 2.8k 阅读 AI 写同款· GEO 优化 ›

web多终端开发学习系列(三)--- 基于bootstrap的表格插件bootstrap-table 基于网页管理系统的开发大多数功能只是对数据的显示与操作，对于数据的显示一般都是通过table表格来显示，所以管理系统的开发很有必要引入表格插件，对于sencha touch等商业化框架，都有自己自带的表格控件，而对于bootstrap需要引入第三方的表格插件，这里我学习下bootstrap table。介绍 bootstrap table是基于bootstrap框架的阅读详情

文章目录

1、介绍

Bootstrap Table介绍见官网：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
Bootstrap Table API：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
Bootstrap Table源码：https://github.com/wenzhixin/bootstrap-table
Boostrap Table 扩展API：http://bootstrap-table.wenzhixin.net.cn/extensions/

2、页面引用

为了方便bootstrap及bootstrap-table用官方推荐引用方式,想自己下载源码可以自行下载.
导出Excel所需额外的4个js可从以下2个地址找到那4个文件,不需要导出的可以无视.
下载地址1：https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/export
下载地址2：https://github.com/hhurz/tableExport.jquery.plugin
HTML代码

<!-- 引入bootstrap样式 -->
<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> 

<!-- bootstrap-table-export数据导出---后面两个是Excel2007所需要的js -->
<script src="${basePath }/js/bootstrap-table-export.js"></script>
<script src="${basePath }/js/tableExport.min.js"></script>
<script src="${basePath }/js/xlsx.core.min.js"></script> 
<script src="${basePath }/js/FileSaver.min.js"></script

3、简单示例

在HTML中定义一个table标签

<table id="table"></table>

使用bootstrapTable有两种方法，第一通过data属性方法，因为不太灵活，不做过多演示

<table data-toggle="table" data-url="data1.json">
    <thead>
    <tr>
        <th data-field="id">Item ID</th>
        <th data-field="name">Item Name</th>
        <th data-field="price">Item Price</th>
    </tr>
    </thead>
</table>

使用JavaScript方式,学习bootstrap-table,就是学习它的API,介绍基本常用的API,详情请查看官方文档或看这个博主翻译的：https://blog.youkuaiyun.com/rickiyeat/article/details/56483577
页面引入以下JS

$("#table").bootstrapTable({ // 对应table标签的id

    url: base_path + "/product/list",   //AJAX获取表格数据的url

    striped: true,                      //是否显示行间隔色(斑马线)

    pagination: true,                   //是否显示分页（*）

    sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）

    paginationLoop: false,      //当前页是边界时是否可以继续按

    queryParams: function (params) {    // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求

        return {

            limit: params.limit, // 每页要显示的数据条数

            offset: params.offset, // 每页显示数据的开始行号

            //sort: params.sort, // 要排序的字段

            //sortOrder: params.order, // 排序规则

            //dataId: $("#dataId").val() // 额外添加的参数

        }

    },//传递参数（*）

    pageNumber: 1,                       //初始化加载第一页，默认第一页

    pageSize: 10,                       //每页的记录行数（*）

    pageList: [10, 25, 50, 100, 'all'],  //可供选择的每页的行数（*）

    contentType: "application/x-www-form-urlencoded",//一种编码。在post请求的时候需要用到。这里用的get请求，注释掉这句话也能拿到数据

    //search: true,                     //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大

    strictSearch: false,        //是否全局匹配,false模糊匹配

    showColumns: true,                  //是否显示所有的列

    showRefresh: true,                  //是否显示刷新按钮

    minimumCountColumns: 2,             //最少允许的列数

    clickToSelect: false,               //是否启用点击选中行

    //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度

    //uniqueId: "id",                   //每一行的唯一标识，一般为主键列

    showToggle: true,                    //是否显示详细视图和列表视图的切换按钮

    cardView: false,                    //是否显示详细视图

    detailView: false,                  //是否显示父子表

    cache: false,                       // 设置为 false 禁用 AJAX 数据缓存， 默认为true

    sortable: true,                     //是否启用排序

    sortOrder: "asc",                   //排序方式

    sortName: 'sn', // 要排序的字段

    columns: [

        {

            field: 'sn', // 返回json数据中的name

            title: '订货号', // 表格表头显示文字

            align: 'center', // 左右居中

            valign: 'middle' // 上下居中

        }, {

            field: 'productname',

            title: '商品名称',

            align: 'center',

            valign: 'middle'

        }, {

            field: 'cost',

            title: '价格(¥)',

            align: 'center',

            valign: 'middle',

            sortable: true

        }, {

            field: 'brankname',

            title: '品牌',

            align: 'center',

            valign: 'middle',

        }, {

            field: 'specificationvalues',

            title: '规格',

            align: 'center',

            valign: 'middle',

        }, {

            field: 'areaname',

            title: '产地',

            align: 'center',

            valign: 'middle',

        }

    ],

    onLoadSuccess: function () {  //加载成功时执行

        console.info("加载成功");

    },

    onLoadError: function () {  //加载失败时执行

        console.info("加载数据失败");

    },
    
    //>>>>>>>>>>>>>>导出excel表格设置

    showExport: phoneOrPc(),              //是否显示导出按钮(此方法是自己写的目的是判断终端是电脑还是手机,电脑则返回true,手机返回falsee,手机不显示按钮)

    exportDataType: "basic",              //basic', 'all', 'selected'.

    exportTypes: ['excel', 'xlsx'],        //导出类型

    //exportButton: $('#btn_export'),     //为按钮btn_export  绑定导出事件  自定义导出按钮(可以不用)

    exportOptions: {

        //ignoreColumn: [0,0],            //忽略某一列的索引  

        fileName: '数据导出',              //文件名称设置  

        worksheetName: 'Sheet1',          //表格工作区名称  

        tableName: '商品数据表',

        excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],

        //onMsoNumberFormat: DoOnMsoNumberFormat  

    }

    //导出excel表格设置<<<<<<<<<<<<<<<<
    
});

4、注意地方

测试时分页先选择’client’,因为分页是客户端的话,导出数据会方便可以随意定义’basic’, ‘all’, ‘selected’.如果分页是服务端的话即使选择’all导出的也是当前页(‘basic’),如果想导出全部话,可以先将页面显示条目数为全部,再导出当前页即就是全部数据了.
分页如果是服务端的话返回的json串必须包含2个数据,一个是total"即所有数据条数.另一个"rows"即"当前页"显示的内容.(见下图json串格式)