第一次记录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 相关文章推荐
JavaScript效率调优经验
Jun 04 Javascript
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
详解JavaScript 中的 replace 方法
Jan 01 Javascript
深入理解js数组的sort排序
May 28 Javascript
JS中递归函数
Jun 17 Javascript
如何用js实现鼠标向上滚动时浮动导航
Jul 18 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
Aug 08 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
Nov 04 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 token使用与验证示例【测试可用】
2017/08/30 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
Array.slice()与Array.splice()的返回值类型
2006/10/09 Javascript
js文件中调用js的实现方法小结
2009/10/23 Javascript
JavaScript Chart 插件整理
2010/06/18 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
2015/12/02 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
dts文件中删除一个node或属性的操作方法
2018/08/05 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
JavaScript位置参数实现原理及过程解析
2020/09/14 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
python 画图 图例自由定义方式
2020/04/17 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
Etam德国:内衣精品店
2019/08/25 全球购物
机械制造专业个人的自我评价
2013/12/28 职场文书
《找不到快乐的波斯猫》教学反思
2014/02/24 职场文书
中层干部培训方案
2014/06/16 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
不同意离婚上诉状
2015/05/23 职场文书