Bootstrap-table使用教程

最新推荐文章于 2024-04-23 03:20:26 发布
最新推荐文章于 2024-04-23 03:20:26 发布
阅读量1.7w 收藏 72
点赞数 19
分类专栏： Bootstrap 文章标签： Bootstrap-table 前端 Bootstrap 插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fd214333890/article/details/81002308
版权

前言

我们先从Bootstrap-table（以下简称BS-table）的基础使用开始讲起，写法来说，BS-table主要分为两种写法，一种是HTML写法，一种是JS写法。这能这里用"HTML写法"和"JS写法"不太专业准确，我就先这么描述着吧，一会代码放上来就能明白我说的什么意思了。本文也主要将这两种写法的大部分（并不敢说我什么都会）使用方法告知大家。

【版本使用】

jQuery@3.3.1

备份地址：https://gitee.com/fd214333890/jquery_3.3.1

bootstrap@4.1.1

备份地址：https://gitee.com/fd214333890/Bootstrap_4.1.1

bootstrap-table@1.12.1

备份地址：https://gitee.com/fd214333890/Bootstrap_table_1.12.1

二、使用

2.1 下载必要的插件

本文所使用的必需的插件以及版本如下表2-1

表2-1 必需的插件及版本
名称版本备注
jQuery3.3.1必须中的必需，不用我多说了吧
Bootstrap3.3.7需要依赖jQuery
Bootstrap-table1.12.1

需要依赖Bootstrap

 

如果使用bower或者npm下载Bootstrap的话，注意可能他会默认给下载Bootstrap v4版本的，因为这里使用的是Bootstrap@3.3.7，所以需要在下载的时候指定版本。如果是自己去官网下载的话，稍微注意一下别下载成了v4版本即可。

2.2 引入BS-table需要的库

一个引入BS-table的HTML文件代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>BS-table</title>
    <!-- 引入Bootstrap样式 -->
    <link rel="stylesheet" href="/bower/bootstrap/dist/css/bootstrap.min.css">
    <!-- 引入Bootstrap-table样式 -->
    <link rel="stylesheet" href="/bower/bootstrap-table/dist/bootstrap-table.min.css">
    <!-- 引入自己写的样式（可省） -->
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <!-- jQuery -->
    <script src="/bower/jquery/dist/jquery.min.js"></script>
    <!-- BS-table -->
    <script src="/bower/bootstrap-table/dist/bootstrap-table.min.js"></script>
    <!-- BS-table中文必须的js（如果不介意用英文的话这个可省略） -->
    <script src="/bower/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
  </body>
</html>

具体什么文件是做什么的已在代码的注释中写的比较详细了，就不一一阐述了，如有不明白的可以通过评论来问我。

此时打开页面，F12查看引入的外部文件是否加载成功，如果有问题，检查一下自己的外部文件路径是否正确。

三、通过HTML的方法来使用BS-table

 

3.1 创建一个基础的BS-table

BS-table官网中也有给出这样的例子，就不再赘述，直接看代码就能知道个大概。

<table data-toggle="table">
      <thead>
        <tr>
          <th data-field="id">学号</th>
          <th data-field="name">姓名</th>
          <th data-field="math">数学</th>
          <th data-field="chinese">语文</th>
          <th data-field="english">英语</th>
          <th data-field="biology">生物</th>
          <th data-field="physics">物理</th>
          <th data-field="chemistry">化学</th>
          <th data-field="politics">政治</th>
          <th data-field="geography">地理</th>
          <th data-field="history">历史</th>
        </tr>
      </thead>
    </table>

这是最基础的一个BS-table的代码，其中需要注意的是<thead>中每一行都有一个data-field属性（在<tbody>中是不需要的），这个属性相当于规定了这一列的id，之后BS-table获取来的数据就会根据我们给出的这个data-field进行一一对应的填表。运行一下，看看我们的BS-table样式。如下图3-1所示。

图3-1 最基础的BS-table样式

 

3.2 为BS-table添加相应的功能

3.2.1 添加一个搜索框

BS-table中已经给我们设置了搜索框功能了，我们只需要在相应设置中将其开启即可。HTML写法的话，就是在<table>标签中添加一个data-search="true"属性即可。在不写该属性时，默认的是data-search="false"。

此时，我们的table代码应如下所示。

<!-- 在这里添加了data-search属性 -->
    <table data-toggle="table" data-search="true">
      <thead>
        <tr>
          <th data-field="id">学号</th>
          <th data-field="name">姓名</th>
          <th data-field="math">数学</th>
          <th data-field="chinese">语文</th>
          <th data-field="english">英语</th>
          <th data-field="biology">生物</th>
          <th data-field="physics">物理</th>
          <th data-field="chemistry">化学</th>
          <th data-field="politics">政治</th>
          <th data-field="geography">地理</th>
          <th data-field="history">历史</th>
        </tr>
      </thead>
    </table>

此时，刷新页面，将会看到在表格右上方多出了一个搜索框。如图3-2所示。

图 3-2

注意，这里BS-table给出的搜索框仅限于对表中已有的数据进行搜索，并不具备向服务器发起请求获取数据功能（可能是我对BS-table了解的太少，没发现有这个功能）

3.2.2 搜索框相关设置

  • 搜索框位置

使用“data-search-align”属性设置搜索框的位置。目前我所知的值可以填“left”和“right”，其余值都将把搜索框设置为与table等宽（width:100%）。默认值为“right”。使用如下：

    <!-- 在这里添加了data-search属性 -->
    <!-- data-search-align设置搜索框为左上方 -->
    <table data-toggle="table" data-search="true" data-search-align="left">
      <thead>
        <tr>
          <th data-field="id">学号</th>
          <th data-field="name">姓名</th>
          <th data-field="math">数学</th>
          <th data-field="chinese">语文</th>
          <th data-field="english">英语</th>
          <th data-field="biology">生物</th>
          <th data-field="physics">物理</th>
          <th data-field="chemistry">化学</th>
          <th data-field="politics">政治</th>
          <th data-field="geography">地理</th>
          <th data-field="history">历史</th>
        </tr>
      </thead>
    </table>

 显示效果如图3-3所示。

图 3-3

这里data-search-align属性并没有“center”值，如果设置为“left”或“right”之外的值，则搜索框会变为与table等宽的样式。如图3-4。

图3-4

 

  • 搜索框按键触发 

BS-table 的搜索框默认的是当你输入内容后自动进行搜索，类似监听搜索框的onchange事件再加一个setInterval进行搜索。设置搜索框按键触发是使用data-search-on-enter-key属性，默认是data-search-on-enter-key="false"，即输入内容自动进行搜索。将data-search-on-enter-key设置为true（data-search-on-enter-key="true"）后，搜索框将会在你按下Enter（回车）键之后进行搜索。（这里截图也展示不了相关的效果，大家就自行尝试吧）。相关代码如下： 

<!-- 在这里添加了data-search属性 -->
    <!-- data-search-on-enter-key="true"设置搜索框需按下enter键才开始搜索操作 -->
    <table data-toggle="table" data-search="true" data-search-on-enter-key="true">
      <thead>
        <tr>
          <th data-field="id">学号</th>
          <th data-field="name">姓名</th>
          <th data-field="math">数学</th>
          <th data-field="chinese">语文</th>
          <th data-field="english">英语</th>
          <th data-field="biology">生物</th>
          <th data-field="physics">物理</th>
          <th data-field="chemistry">化学</th>
          <th data-field="politics">政治</th>
          <th data-field="geography">地理</th>
          <th data-field="history">历史</th>
        </tr>
      </thead>
    </table>

 

 

  • 精确 / 模糊搜索 

BS-table中使用data-strict-search来对精确搜索进行设置，默认的设置是data-strict-search="false"，即不开启精确搜索。不开启精确搜索时，搜索将会是模糊搜索，例如表中有三个人“张三”、“李四”、“赵老五”，当我们输入“赵老”时，依然会将“赵老五”列入搜索结果中。如下图3-5所示。

图3-5 模糊搜索

 如果将data-strict-search设置为true（data-strict-search="true"）则开启精确搜索。此时我们再搜索“赵老”，将不会把“赵老五”列入搜索结果中。如图3-6所示。

图3-6 精确搜索

 

 

  • 默认搜索字符串

设置搜索框默认搜索字符串使用data-search-text属性，例如我把搜索框的默认字符串设置为"赵老五"（data-search-text="赵老五"），那么当我载入BS-table后搜索框将自动填充“赵老五”，并且对该内容进行搜索，即我们可以使用该属性设置BS-table初始的搜索内容（并显示）。下图即是我们刚载入BS-table后的界面。可以看到此时BS-table已经对搜索框的内容“赵老五”进行了搜索。

图3-7 搜索框默认搜索字符串

 设置搜索框默认搜索字符串相关代码如下：

<!-- data-search-text设置搜索框默认搜索字符串为“赵老五” -->
<table data-toggle="table" data-search="true" data-search-on-enter-key="true" 
    data-search-text="赵老五"
    data-url="/data.json" >
      <thead>
        <tr>
          <th data-field="id">学号</th>
          <th data-field="name">姓名</th>
          <th data-field="math">数学</th>
          <th data-field="chinese">语文</th>
          <th data-field="english">英语</th>
          <th data-field="biology">生物</th>
          <th data-field="physics">物理</th>
          <th data-field="chemistry">化学</th>
          <th data-field="politics">政治</th>
          <th data-field="geography">地理</th>
          <th data-field="history">历史</th>
        </tr>
      </thead>
    </table>

 

  • 搜索超时

 为了防止搜索时长过长从而导致“锁表”，我们可以设置搜索超时属性，data-search-time-out属性即是设置搜索超时，默认的值为500，即超过0.5s则视为搜索超时，这里是以毫秒为单位的。（因为条件有限，这里对该属性就不进行测试了，我也没有遇到相关的情况，具体的设置还是以官方文档为主）。

3.2 给BS-table获取数据

现在表格样式大致是可以了，接下来说说表格最重要的东西了——获取数据，按照之前做HTML+jQuery的思路，<table>获取数据大致思路为以下两种：

1）直接在HTML中使用<tr><td></td></tr>写死，但是如果遇到从后端获取数据就没办法了。

2）使用ajax获取数据，然后DOM操作给<table>加上数据，最常用的方法了，异步加载数据，能从后端获取数据

这里使用BS-table你会发现在加载完BS-table后table的结构远远不止一个<table>那么简单，想用ajax强行加上去，我不敢说这么做不行（反正我是没敢这么做），但是这种方法绝对是劳民伤财的方法。

BS-table中已经有了对应的从后台获取数据的方法了，HTML写法中，添加两个属性即可：

1）data-method

2）data-url

和我们写ajax一个道理，总要有一个url和method对吧。talk is cheap,show me the code。

下面是获取后台数据的相关代码

<index.html>

<table data-toggle="table" data-search="true"
      data-method="post"
      data-url="/getData" >
      <thead>
        <tr>
          <th data-field="id" data-sortable="true">学号</th>
          <th data-field="name">姓名</th>
          <th data-field="math">数学</th>
          <th data-field="chinese">语文</th>
          <th data-field="english">英语</th>
          <th data-field="biology">生物</th>
          <th data-field="physics">物理</th>
          <th data-field="chemistry">化学</th>
          <th data-field="politics">政治</th>
          <th data-field="geography">地理</th>
          <th data-field="history">历史</th>
        </tr>
      </thead>
    </table>

上面代码，data-method="post"是使用post方法对数据进行获取（可以理解为ajax的post方法），data-url="/getData"从/getData这个路由获取数据。接下来我也把后端代码贴出来，加深对数据获取的理解。

<服务器端>

// 定义组数据（这里数据写死了，可以根据自己需要来获取数据库中的数据）
const tableData = [
    {
        "id": "1111",
        "name": "张三",
        "math": "98",
        "chinese": "10",
        "english": "80",
        "biology": "20",
        "physics": "23",
        "chemistry": "100",
        "politics": "9",
        "geography": "5",
        "history": "25"
    },
    {
        "id": "1112",
        "name": "李四",
        "math": "10",
        "chinese": "80",
        "english": "60",
        "biology": "100",
        "physics": "70",
        "chemistry": "50",
        "politics": "50",
        "geography": "33",
        "history": "25"
    },
    {
        "id": "1113",
        "name": "赵老五",
        "math": "60",
        "chinese": "60",
        "english": "60",
        "biology": "60",
        "physics": "60",
        "chemistry": "60",
        "politics": "60",
        "geography": "60",
        "history": "60"
    }
]
// 路由设置
router.post('/getData', function (req, res) {
    // 返回数据
    res.send(tableData);
})

这样就完成了从服务器获取数据的整套流程（当然，服务器端从数据库获取数据的那些代码就不用我再写了吧，和这个也没多大关系了），写服务器端代码主要是让大家了解一下数据再服务器端是以什么样的格式返回回来的（当时研究这个服务器端格式也让我掉了挺多头发了，我这里给大家省省头发）。

就这样BS-table的大致从获取数据到表格渲染数据的流程就完成了。最后结果如图3-7所示。

图  3-7 

写在最后

至此，BS-table的HTML写法大体说完了，后面我再慢慢跟新JS写法了，可能BS-table的其他样式方面的东西讲的比较少达不到各种各样的需求，我下来再充分准备准备继续更新。因为不属于官方文档，本论文肯定会有写得不谨慎的地方，还请大家多多指出，若大家有什么相关的需求可以评论留言，我会尽量满足大家的需求。

参考资料：

Bootstrap-table API中文版

BuBu高打火机
关注
  • 19
    点赞
  • 踩
  • 72
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
专栏目录
如何实现BootStrapTable的动态表格
s_156的博客
05-28 5004
BootStrapTable的动态表格 在我们构建BootStrapTable(下文中均称：BsTable)，其中columns参数作为表格列的内容存储，我们的需求是根据返回的数据动态的生成columns参数的内容。从而生成动态表格。 columns参数格式：类似下文 columns: { { field: 'Id', title: '编号', },{ field: 'name', title: '名称', },{
bootstrap table带跳转页面
浩星
03-29 5716
老规矩先看效果图： 整个效果我都放在百度网盘了，最下面是地址： 简单说说这个： 第一引入文件，js主要是bootstrap.js,还有table的js,还有语言包的js,还有跳转js <script src="js/jquery-2.1.1.min.js"></script> <script src="js/bootstrap.min.js">...
Bootstrap Table数据表格的使用指南
最新发布
erthrerg的博客
04-23 1020
总而言之，面试官问来问去，问的那些Redis知识点也就这么多吧，复习的不够到位，知识点掌握不够熟练，所以面试才会卡壳。将这些Redis面试知识解析以及我整理的一些学习笔记分享出来给大家参考学习《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！查询和条件同样在queryParams属性中添加，查询时只需刷新表格就可以了，清空时，只需要把查询的form表单清空即可。查询条件参数。查询和清空的JS方法。//查询。
bootstrap-table.min.js不同版本返回分页参数不同的问题
weixin_33785108的博客
09-07 1796
1、使用公司用的bootstrap-table.min.js ，刚开始bootstrap-table分页参数是这么写的 分页查询参数： 后端代码为： Result返回类的参数为list,以及totalCount 所以此时访问的时候请求参数为 http://localhost:8080/spc/findMemberRight.do?pageSize=2&pa...
boostrapTable.js基本使用和里面常用的方法使用(学习篇)
skyblue_afan的博客
03-04 741
boostrapTable使用
利用bootstrap-table插件自带的打印功能打印表格
冲出仁川，走出马德里，故事还会再继续
03-17 3900
文章目录1、前端代码：2、前端页面：1、表格数据展示2、点击打印按钮之后:3、插件下载地址：4、碰到的bug 1、前端代码： <link href="https://unpkg.com/bootstrap-table@1.18.2/dist/bootstrap-table.min.css" rel="stylesheet"> <script src="https://unpkg.com/bootstrap-table@1.18.2/dist/bootstrap-table.min.js"
SINGING VOICE CONVERSION WITH NON-PARALLEL DATA
林宋的搬砖流水账
10-28 401
会议：2019 MIPR 作者：Xin Chen 单位：snap research 文章目录abstractintroductionexperiment abstract 利用声学后验概率+DBLSTM基于非平行数据完成SVC。 introduction 可以将user的声音换成目标人的，伪装；也可以将singer的音色换成user的，展示。 experiment CMU Arctic的数据集用于训练，slt作为target WORLD提特征 测试：source speaker来自于MIR 1K dat
Bootstrap table使用方法汇总
11-29
本文将着重讲解自己在项目中使用到bootstrap-table的一些理解和如何学习它。 首先交代一下，jquery ，bootstrap ，bootstrap-table 三者之间的关系。bootstrap很多部分代码涉及到了jquery的，也就是说 bootstrap是...
bootstrap-table
12-26
最新版本bootstrap-table几乎支持所有表格效果.附带使用教程。
bootstraptable-reorder-columns表格拖拽排序列
01-19
bootstrap-table-reorder-columns表格拖拽排序列的一个插件
值得分享的Bootstrap Table使用教程
11-26
bootstrap-table是在bootstrap-table的基础上写出来的，专门用于显示...bootstrap很多部分代码涉及到了jquery的，也就是说 bootstrap是依赖jquery的，而我们要使用的bootstrap-table则是在bootstrap基础上创造出来的，
new table
06-01
NULL 博文链接：https://eartooth.iteye.com/blog/869728
BootStrapTable 单选及取值的实现方法
11-29
学习bootstrapTable 一直没有找到 单选框的选定的和取值的教程,今天写一个.作为笔记 1. 效果图: 点击 bootstrapTable 单选的按钮, 选中该列, 取到该列的所有值. 2. js 代码 : bootstrapTable 初始化 &nbsp;a. 注意:&nbsp; ...
BootStrap----table
yingw1的博客
02-14 1476
bootstrap
bootstrap table php,Bootstrap Table使用方法详解
weixin_42116705的博客
03-10 1164
bootstrap-table使用总结bootstrap-table是在bootstrap-table的基础上写出来的，专门用于显示数据的表格插件。而bootstrap是来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，具有简便灵活，快速前端开发的优势。对与bootstrap在此就不在叙述。本文将着重讲解自己在项目中使用到boo...
BootstrapTable (前后端分页，表格 ajax 返回数据回调处理) 配置参数全说明
热门推荐
禅与计算机程序设计艺术
12-29 1万+
【代码】BootstrapTable (前后端分页，表格 ajax 返回数据回调处理) 配置参数全说明。
Bootstrap表格插件--bootstrap-table
fendo
12-05 4979
一、简介 bootstrap-table是基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。 官网地址： http://bootstrap-table.wenzhixin.net.cn/zh-cn/ Github地址： https://github.com/wenz
bootstrap table的基础用法
野蛮女孩的博客
11-23 1779
JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利） 前言：前面介绍了两篇关于bootstrap table的基础用法，这章我们继续来看看它比较常用的一些功能，来个终结篇吧，毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能覆盖似乎不太现实，博主挑选了一些自认为比较常用的功能在此分享给各位园友。源码也在这篇统一给出。好了，不多说废话，开始我们的干货之旅吧。 bootstrap table系列： JS组件系列——表格组件神器：bootstra
Bootstrap Table 表格参数详解
weixin_30556161的博客
08-02 343
表格参数 名称 标签 类型 默认 描述 - data-toggle String 'table' 不用写 JavaScript 直接启用表格。 classes data-classes String 'table table-hover' 表格的类名称。默认情况下，表格是有边框的，你可以...
bootstrap-table重载_BootstrapTable的使用教程
05-24
var table = $('#table').bootstrapTable('getOptions'); ``` 其中，'#table' 是你的表格的 ID，可以根据你的实际情况进行修改。 2. 重载 Bootstrap Table 重载 Bootstrap Table 的方法有多种，以下是其中的两种...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值