Bootstrap Table 使用指南：从引入到高级功能实战

作者：工具松鼠时间：2026-10-22 03:00:12浏览：512

本文详细介绍基于 Bootstrap 的 jQuery 表格插件 Bootstrap Table 的使用方法。涵盖 CDN 与 NuGet 引入方式、客户端与服务端数据渲染模式对比、JS 初始化配置、奇偶行样式与行列合并等高级功能，以及处理非标准 JSON 格式、服务端搜索排序和中文乱码等常见问题的解决方案。

本文分享 Bootstrap Table 的详细使用指南，供读者参考。

Bootstrap Table 简介与特性

1. Bootstrap Table 简介

1.1 简介与核心特性

Bootstrap Table 是一款由国人开发的基于 Bootstrap 的 jQuery 表格插件。通过简单的配置，即可实现强大的单选、多选、排序、分页、编辑、导出及过滤等功能。目前该项目在 GitHub 上已获得 2600 多个 Star，受欢迎程度可见一斑。官方地址为 http://bootstrap-table.wenzhixin.net.cn/，用户可在此下载所需的 JS 和 CSS 文件，并查阅参考文档与示例。

支持 Bootstrap 3 和 Bootstrap 2
自适应界面布局
固定表头功能
提供丰富的配置参数
支持直接通过 HTML 标签使用
支持显示或隐藏指定列
支持显示或隐藏表头
通过 AJAX 获取 JSON 格式数据
支持数据排序
支持表格格式化
支持单选或多选模式
具备强大的分页功能
支持卡片视图展示
支持多语言国际化
支持扩展插件

数据渲染模式：客户端与服务端

1.2 数据渲染方式

Bootstrap Table 将数据渲染到表格主要有两种模式：客户端（client）模式和服务器（server）模式。

客户端模式指在服务器端一次性加载所有需展示的数据，转换为 JSON 格式后传输至前端界面。在 JavaWeb 环境中，数据可保存在 request 中并转发至指定页面，页面初始化时通过 EL 表达式获取并调用初始化函数传入 JSON 字符串即可显示。该模式较为简单，数据一次性加载后根据每页记录数自动生成分页。点击第二页时，前端直接展示已加载数据，不再向服务器发送请求。同时，用户可使用其内置的全局搜索功能，对全部数据进行搜索。适用于数据量较小的场景。

然而，对于数据量巨大的系统，客户端模式会加载大量用户不再关注的数据，导致加载速度变慢并增加服务器负担，浪费资源。此时应采用服务器模式。服务器模式根据设定的每页记录数和当前页码，向服务器发送查询请求，获取数据后展示。该方法能动态加载数据，节省服务器资源，但无法使用内置的全数据搜索功能，因为仅加载了一页数据，全局搜索范围仅限于当前页。客户端模式相对简单，读者可参考官方文档和示例自行实践。本文主要介绍服务器模式，并演示如何实现带参数的查询。

引入 Bootstrap Table 的方法

2. Bootstrap Table 的引入方法

引入 Bootstrap Table 通常有两种方式。

2.1 使用免费稳定的 CDN 服务

例如使用 Bootstrap 中文网提供的开源项目免费 CDN 服务，搜索并选择较稳定的版本。

Bootstrap Table 简介与特性

首先，Bootstrap 的所有 JavaScript 插件均依赖 jQuery，因此必须在引入 Bootstrap 之前引入 jQuery。目前推荐使用稳定版本 jquery.1.12.1.js。

其次，Bootstrap Table 是 Bootstrap 的一个组件，因此依赖 Bootstrap。我们需要先添加 Bootstrap 的引用。在搜索框中搜索 bootstrap，虽然已有版本 4 的预览版，但仍建议使用更稳定的 Bootstrap 3，目前最新稳定版为 3.3.5。

最后，引入 Bootstrap Table 包。在搜索框中搜索 bootstrap-table，目前较好的版本为 1.11.1。或者，我们可以直接访问其源码仓库 git clone https://github.com/wenzhixin/bootstrap-table，下载后放入项目中即可。

2.2 使用 Visual Studio 自带的包管理工具 NuGet

NuGet 的官方说明是：NuGet 是一款 Visual Studio 的扩展，它可以简单地安装、升级开源库和工具。官网地址：http://www.nuget.org/。从官网下载安装完成后，即可在 VS 中使用。具体使用方法如下：右键点击解决方案，如图所示。

Bootstrap Table 简介与特性

选择“管理解决方案的 NuGet 的程序包”，界面如图所示。

Bootstrap Table 简介与特性

依次搜索 jquery、bootstrap、bootstrap-table 等并放入本地文件夹。如果发现内置版本较低，可以使用 Bootstrap 中文网开源项目免费 CDN 服务获取最新版本。

代码实现与初始化配置

3. 代码详解

3.1 在 HTML 页面引用相关组件，并定义一个空表格。


<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="Cache-Control" content="no-cache">
 <title>登录信息</title>
 <!-- 1、Jquery组件引用-->
 <script src="../js/jquery.min.js?v=1.11.2"></script>
 <!-- 2、bootstrap组件引用-->
 <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
 <script src="../js/bootstrap.min.js?v=3.3.6"></script>
 <!-- 3、bootstrap-table组件引用-->
 <link href="../css/plugins/bootstrap-table/bootstrap-table.min.css?v=1.11.1" rel="stylesheet" />
 <script src="../js/plugins/bootstrap-table/bootstrap-table.min.js?v1.11.0"></script>
 <script src="../js/plugins/bootstrap-table/bootstrap-table-zh-CN.js?v1.11.0"></script><!--显示中文-->
 <!-- 4、其他-->
 <link href="../css/font-awesome.min.css" rel="stylesheet" />
 <link href="../css/style.min.css?v=4.1.0" rel="stylesheet">
 <link href="../css/customer_info.css?v=4.1.0" rel="stylesheet" />
 <script src="../js/plugins/layer/laydate/laydate.js"></script>
 <script src="../js/customer_info.js"></script>
</head>
<body class="gray-bg">
 <div class="wrapper wrapper-content" id="userLogin">
 <div id="dateSearch">
  <span><strong>开始日期: </strong></span>
  <input type="text" class="laydate-icon startDate" placeholder="开始日期">
  <span><strong>结束日期: </strong></span>
  <input type="text" class="laydate-icon endDate" placeholder="结束日期">
  <span><strong>用户ID: </strong></span>
  <input type="text" class="default-input form-control imuserid" placeholder="请输入用户id">
  <button type="button" class="btn btn btn-info search"> <i class="fa fa-search"></i> 搜索</button>
 </div>
 <div class="row" id="infoArea">
  <div class="col-sm-12" style="padding: 0 10px;">
  <ul class="nav nav-tabs" id="navList">
   <li data-name = "loginLogTab" class="active"><a data-toggle="tab" href="#loginLogTab"><i class="fa fa-user"></i>登录信息</a> </li>
   <li data-name = "receiveLogTab" class=""><a data-toggle="tab" href="#receiveLogTab"><i class="fa fa-briefcase"></i> 订购信息</a> </li>
   <li data-name = "socketInputTab" class=""><a data-toggle="tab" href="#socketInputTab"><i class="fa fa-briefcase"></i> 反馈信息</a> </li>
   <li data-name = "socketOutputTab" class=""><a data-toggle="tab" href="#socketOutputTab"><i class="fa fa-briefcase"></i> 出行信息</a> </li>
  </ul>
  <div class="tab-content" id="tabContent">
   <div id="toolbar" class="btn-group">
    <button id="btn_add" type="button" class="btn btn-info btn-sm rightSize">
    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
    </button>
    <button id="btn_edit" type="button" class="btn btn-info btn-sm rightSize">
    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
    </button>
    <button id="btn_delete" type="button" class="btn btn-info btn-sm rightSize">
    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
    </button>
   </div>
   <div id="loginLogTab" class="tab-pane active">
   <div class="table-responsive">
    <table id="loginLog-table"></table>
   </div>
   </div>
   <div id="receiveLogTab" class="tab-pane">
   <div class="table-responsive">
    <table id="receiveLog-table"></table>
   </div>
   </div>
   <div id="socketInputTab" class="tab-pane">
   <div class="table-responsive">
    <table id="sockctInput-table"></table>
   </div>
   </div>
   <div id="socketOutputTab" class="tab-pane">
   <div class="table-responsive">
    <table id="sockctOutput-table"></table>
   </div>
   </div>
  </div>
   
  </div>
 </div>
 </div>
</body>
</html>

引入所需文件后，最关键的是定义一个空的 <table></table>。当然，Bootstrap Table 还提供了另外两种简单的用法：直接通过 $table.bootstrapTable({data: data})，具体参考 form-data.html；或者直接在 table 标签内定义 <table data-toggle="table" data-url="../json/data1.json">，利用类似“data-...”的相关属性，具体参考 table-style.html。这两种方法无需在 JS 中注册即可实现数据加载。

但博主认为，虽然上述用法简单，但灵活性较差，因此我们统一采用在 JS 中初始化的方式来使用 table 组件。

3.2 JS 初始化


var queryParams = function (params) {
 var param = {
  pageIndex: Math.ceil(params.offset / params.limit) + 1,
  pageSize: params.limit,
  order: params.order,
  ordername: params.sort,
  startDateTime: $("#dateSearch .startDate").val(),
  endDateTime: $("#dateSearch .endDate").val(),
  search: $("#dateSearch .imuserid").val()
 };
 return param;
 }
 
 var responseHandler = function (e) {
 console.log(e);
 if (e.data && e.data.length > 0) {
  return { "rows": e.data, "total": e.count };
 }
 else {
  return { "rows": [], "total": 0 };
 }
 
 }
 var uidHandle = function (res) {
 var html = "<a href='#'>"+ res + "</a>";
 return html;
 }
 var operateFormatter = function (value, row, index) {//赋予的参数
 return [
  '<button class="btn btn-info btn-sm rightSize detailBtn" type="button"><i class="fa fa-paste"></i> 详情</button>',
  '<button class="btn btn-danger btn-sm rightSize packageBtn" type="button"><i class="fa fa-envelope"></i> 通知</button>'
 ].join('');
 }
 self.dataInit = function (name) {
 var url, columns, tableName;
 switch (name) {
  case 'loginLogTab':
  tableName = "loginLog-table";
  columns = [
   {
   checkbox: true
   },
   {
   field: 'uid',
   title: '用户编号',
   align: 'center',
   formatter: uidHandle,//自定义方法设置uid跳转链接
   width:300
   }, {
   field: 'name',
   title: '姓名',
   align: 'center',
   sortable:false //本列不可以排序
   }, {
   field: 'sex',
   title: '性别',
   align: 'center'
   }, {
   field: 'age',
   title: '年龄',
   align: 'center',
   sortable: true,
   clickToSelect: false,
   sortName: "age",
   order:"asc"
   }, {
   field: 'area',
   title: '户籍所在地',
   align: 'left',
   halign:'center' //设置表头列居中对齐
   }, {
   field: 'loginWay',
   title: '登录方式',
   align: 'center'
   }, {
   field: 'status',
   title: '状态',
   align: 'center'
   },{
   field: 'createTime',
   title: '登录时间',
   align: 'center',
   width: 90
   }, {
   field: 'orderService',
   title: '购买服务',
   align: 'center'
   }, {
   field: 'connectorIP',
   title: '连接器IP',
   align: 'center'
   }, {
   field: 'connectorPort',
   title: '连接器端口',
   align: 'center'
   }, {
   field: 'operate',
   title: '操作',
   align: 'center',
   valign: 'middle',
   formatter: operateFormatter //自定义方法，添加操作按钮
   }
  ];
  break;
  case 'receiveLogTab':
  //省略
  break;
  case 'socketInputTab':
  //省略
  break;
  case 'socketOutputTab':
  //省略
  break;
 }
 $('#' + tableName).empty();
 $('#' + tableName).bootstrapTable('destroy').bootstrapTable({
  url: '../data/login_info2.json', //url一般是请求后台的url地址,调用ajax获取数据。此处我用本地的json数据来填充表格。
  method: "get",   //使用get请求到服务器获取数据
  dataType: "json",
  contentType: 'application/json,charset=utf-8',
  toolbar: "#toolbar",  //一个jQuery 选择器，指明自定义的toolbar 例如:#toolbar, .toolbar.
  uniqueId: "id",   //每一行的唯一标识，一般为主键列
  height: document.body.clientHeight-165, //动态获取高度值，可以使表格自适应页面
  cache: false,   // 不缓存
  striped: true,   // 隔行加亮
  queryParamsType: "limit",  //设置为"undefined",可以获取pageNumber，pageSize，searchText，sortName，sortOrder 
      //设置为"limit",符合 RESTFul 格式的参数,可以获取limit, offset, search, sort, order 
  queryParams: queryParams,
  sidePagination: "server",  //分页方式：client客户端分页，server服务端分页（*）
  // sortable: true,   //是否启用排序;意味着整个表格都会排序
  sortName: 'uid',   // 设置默认排序为 name
  sortOrder: "asc",   //排序方式
  pagination: true,   //是否显示分页（*）
  search: true,   //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
  strictSearch: true,
  showColumns: true,   //是否显示所有的列
  showRefresh: true,   //是否显示刷新按钮
  showToggle:true,   //是否显示详细视图和列表视图
  clickToSelect: true,  //是否启用点击选中行
  minimumCountColumns: 2,  //最少允许的列数 clickToSelect: true, //是否启用点击选中行
  pageNumber: 1,   //初始化加载第一页，默认第一页
  pageSize: 10,   //每页的记录行数（*）
  pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
  paginationPreText: "Previous",
  paginationNextText: "Next",
  paginationFirstText: "First",
  paginationLastText: "Last",
  responseHandler: responseHandler,
  columns: columns,
  onLoadSuccess: function (data) { //加载成功时执行
  console.log(data);
  },
  onLoadError: function (res) { //加载失败时执行
  console.log(res);
  }
 });
 }

表格初始化也很简单，只需定义相关参数。上面博主标注为重要的参数已添加注释，如果你的表格有较多页面需求，直接使用必要参数即可解决。

同样，在 columns 参数中也有许多需要设置的选项，例如列的排序、对齐方式、宽度等。这些内容相对简单，不涉及表格核心功能，查阅 API 即可掌握。

3.3 页面效果图展示

Bootstrap Table 简介与特性

高级功能：样式与合并

4. 其他常用且高级功能

4.1 实现表格奇偶行背景颜色隔行显示

单一的表格数据显示略显单调。通过设置表格奇偶行背景颜色隔行显示，可使表格更加生动。实际应用中经常遇到此需求。实现方法通过添加列方法，如图所示。

Bootstrap Table 简介与特性


var rowStyle = function (row, index) {
 var classes = ['success', 'info'];
 if (index % 2 === 0) {//偶数行
 return { classes: classes[0]};
 } else {//奇数行
 return {classes: classes[1]};
 }
}

效果如图所示。

Bootstrap Table 简介与特性

4.2 实现表格行列合并

表格的行列合并功能无需引用其他 JS 文件，只需在 HTML 页面使用 table 的 colspan 和 rowspan 属性即可实现。


<table id="receiveLogs-table"
 class="table table-hover" 
 data-pagination="true"
 data-show-refresh="false" 
 data-show-toggle="false" 
 data-showColumns="false"
 data-toggle="table"
 data-row-style="rowStyle"
 <strong>data-url="../data/login_info.json"</strong>>
 <thead>
 <tr>
 <th colspan="5" data-valign="middle" data-halign="center">用户基本信息</th>
 <th colspan="6" data-valign="middle" data-halign="center">用户购买信息</th>
 <th rowspan="2" data-field="operate" data-valign="middle" data-halign="center" data-formatter="operateFormatter">操作</th>
 </tr>
 <tr>
 <th data-field="uid" data-align="center" data-formatter="setCode">用户编号</th>
 <th data-field="name" data-align="center">姓名</th>
 <th data-field="sex" data-align="center">性别</th>
 <th data-field="age" data-align="center" data-sortable="true">年龄</th>
 <th data-field="area" data-align="center">户籍所在地</th>
 
 <th data-field="loginWay" data-align="center">登录方式</th>
 <th data-field="status" data-align="center">状态</th>
 <th data-field="createTime" data-align="center">登录时间</th>
 <th data-field="orderService" data-align="center">购买服务</th>
 <th data-field="connectorIP" data-align="center">连接器IP</th>
 <th data-field="connectorPort" data-align="center">连接器端口</th>
 </tr>
 </thead>
</table>

要添加操作按钮和奇偶行背景颜色隔行显示，需要添加相应的 JS 方法，如下所示。


function operateFormatter(value, row, index) {//赋予的参数
 return [
 '<button class="btn btn-info btn-sm rightSize detailBtn" type="button"><i class="fa fa-paste"></i> 详情</button>',
 '<button class="btn btn-danger btn-sm rightSize packageBtn" type="button"><i class="fa fa-envelope"></i> 通知</button>'
 ].join('');
}
 
var rowStyle = function (row, index) {
 var classesArr = ['success', 'info'];
 if (index % 2 === 0) {//偶数行
 return { classes: classesArr[0] };
 } else {//奇数行
 return { classes: classesArr[1] };
 }
}
window.operateFormatter = operateFormatter;
window.rowStyle = rowStyle;

效果如图所示。

Bootstrap Table 简介与特性

常见问题与解决方案

5. 遇到的问题及解决方法

5.1 当请求返回的数据结果不是固定的“total”, "rows”格式时，如何渲染表格数据？

我们运用 $('#'+tableName).bootstrapTable({ url: '../data/login_info.json'}) 请求 JSON 数据，必须要求 JSON 数据格式为固定的 key 值，即必须按照“total”, "rows”的格式才能填充数据到表格，如图所示。

Bootstrap Table 简介与特性

但是，当接口返回的数据格式不是固定的“total”, "rows”时，我们需要用到一个转换函数 responseHandler，将数据指引到“total”, "rows”上去。

即用 login_info2.json 和参数 responseHandler 实现数据填充。login_info2.json 的数据格式，如图所示。

Bootstrap Table 简介与特性

添加的 responseHandler 的方法，如图所示。

Bootstrap Table 简介与特性

将返回结果通过该方法引导，也能实现数据的填充。

5.2 Bootstrap Table 自带的搜索功能，在服务器模式和客户端模式的应用说明

由于实际应用中，一般请求服务端返回的数据量很大，所以通常会使用服务器模式加载数据。因此，通过 search: true 显示的内部模糊匹配功能不常用。当然，服务器模式加载的数据也可以实现搜索功能，即将数据传入后台，由后台处理后返回前端。

但是，如果你需要对多个字段进行模糊匹配，这意味着后台需要对多个数据字段进行 like 操作，查询效率必然低下。因此，如果需要模糊匹配的字段很多，这个 search 在实际项目中往往派不上用场。综上所述，博主认为只有在客户端分页时，这个搜索功能的作用比较明显。


var queryParams = function (params) {
 var param = {
  pageIndex: Math.ceil(params.offset / params.limit) + 1,
  pageSize: params.limit,
  search:$("#dateSearch .imuserid").val()
 };
 return param;
 }

5.3 Bootstrap Table 的排序，在服务器模式和客户端模式的应用说明

在客户端模式时，排序功能有效。在服务器模式下，通过 sortable: true 所设置的排序功能作用有限，因为它只会对当前页数据进行排序，而不会对所有数据进行排序。服务器模式要实现排序功能，需要向后台添加排序字段 order 和 ordername，由后台处理后返回前端。


var queryParams = function (params) {
 var param = {
 pageIndex: Math.ceil(params.offset / params.limit) + 1,
 pageSize: params.limit,
 order: params.order,
 ordername: params.sort
 };
 return param;
}

5.4 关于通过“get”方式请求本地 .json 文件时出现中文乱码的问题

在请求本地 login_info2.json 数据时，请求方式 method:'get'，设置为“post”时会出现“405”报错；同时，我发现从 json 文件请求的数据，返回到页面时出现中文乱码的情况；但是页面上已经设置了 <meta charset="utf-8">，同时 ajax 请求时也设置了内容返回的字符编码：contentType: 'application/json,charset=utf-8'，但还是出现乱码。经过网上查找，找到解决方法是：

用记事本打开 json 文件，另存为，将编码选择为 utf-8，存储替换原来的文件即可。如图所示。

Bootstrap Table 简介与特性

总结与参考资料

6. 总结

博主也是在开发后台管理系统时，初次接触到 bootstrap table 表格组件，觉得它具有以下优势：

界面采用扁平化风格，用户体验较好，能更好地兼容各种客户端。这点也是最重要的。开源、免费。国人最喜欢的是免费。呵呵。相对 Jqgrid、easyUI 而言，比较轻量级。功能不能说最全面，但基本够用。

7. 参考的相关 API 文档

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/

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

作者最新文章

WebStorm内置JS代码格式化功能怎么用

2026-11-05 10:10:47

在线JS代码格式化与混淆压缩工具推荐及使用指南

2026-11-03 20:31:53

CodePen、JSFiddle与RunJS对比：哪款在线JavaScript编辑器更好用

2026-11-03 18:52:45

无需安装环境，5款主流JavaScript在线运行工具推荐

2026-11-03 18:23:26

JS怎么将地址栏查询字符串转换为JSON对象

2026-11-03 18:10:29