第一次记录Bootstrap table学习笔记(1)


Posted in Javascript onMay 18, 2017

第一次使用Bootstrap-table这个表格插件,记录一下使用过程中遇到的问题。

|引入CSS文件

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">

|引入相关库

我们需要引入Jquery库、bootstrap库、以及bootstrap-table.js文件

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<-- put your locale files after bootstrap-table.js -->
<script src="bootstrap-table-zh-CN.js"></script>

|启用Bootstrap Table插件:

官方文档中给出了我们有两种那个方式来启用bootstrap-table插件:

1、通过data属性的方式:

<table data-toggle="table">
 <thead>
 <tr>
  <th>Item ID</th>
  <th>Item Name</th>
  <th>Item Price</th>
 </tr>
 </thead>
 <tbody>
 <tr>
  <td>1</td>
  <td>Item 1</td>
  <td>$1</td>
 </tr>
 <tr>
  <td>2</td>
  <td>Item 2</td>
  <td>$2</td>
 </tr>
 </tbody>
</table>

2、通过js的方式:

//只需要HTML中写下table标签,并设置id
<table id="table"></table>
$('#table').bootstrapTable({
 columns: [{
 field: 'id',

 title: 'Item ID'
 }, {
 field: 'name',
 title: 'Item Name'
 }, {
 field: 'price',
 title: 'Item Price'
 }],
 data: [{
 id: 1,
 name: 'Item 1',
 price: '$1'
 }, {
 id: 2,
 name: 'Item 2',
 price: '$2'
 }]
});

也可以通过url获取数据

$('#table').bootstrapTable({
 url: 'data1.json',
 columns: [{
 field: 'id',
//与返回值的JSON数据的key值对应
 title: 'Item ID'
//列名
 }, {
 field: 'name',
 title: 'Item Name'
 }, {
 field: 'price',
 title: 'Item Price'
 }, ]
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
Bootstrap进度条组件知识详解
May 01 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
Oct 16 Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 Javascript
vue如何使用async、await实现同步请求
Dec 09 Javascript
使用JavaScript获取Django模板指定键值数据
May 27 Javascript
原生js轮播特效
May 18 #Javascript
js实现放大镜特效
May 18 #Javascript
vue v-on监听事件详解
May 17 #Javascript
vue v-model表单控件绑定详解
May 17 #Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
May 17 #Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 #Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 #Javascript
You might like
PHP实现Socket服务器的代码
2008/04/03 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
vue+iview动态渲染表格详解
2019/03/19 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
2020/08/03 Javascript
vue编写简单的购物车功能
2021/01/08 Vue.js
Python删除windows垃圾文件的方法
2015/07/14 Python
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
伦敦剧院门票:From The Box Office
2018/06/30 全球购物
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
四风对照检查材料范文
2014/09/27 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
个人承诺书格式范文
2015/04/29 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
基于flask实现五子棋小游戏
2021/05/25 Python