第一次记录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 相关文章推荐
Jsonp 跨域的原理以及Jquery的解决方案
Jun 27 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
jQuery实现3D文字特效的方法
Mar 10 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 Javascript
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
JS co 函数库的含义和用法实例总结
Apr 08 Javascript
Vue如何将页面导出成PDF文件
Aug 17 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 字符串操作入门教程
2006/12/06 PHP
JSON在PHP中的应用介绍
2012/09/08 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
javascript 无提示关闭窗口脚本
2009/08/17 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
用js实现in_array的方法
2013/11/05 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
2017/03/30 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
JS实现评价的星星功能
2017/08/20 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
VUE实现移动端列表筛选功能
2019/08/23 Javascript
Layui数据表格 前后端json数据接收的方法
2019/09/19 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
通过实例简单了解python yield使用方法
2020/08/06 Python
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
数控专业推荐信范文
2013/12/02 职场文书
学校消防安全责任书
2014/07/23 职场文书
2015选调生工作总结
2015/07/24 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python
教你怎么用Python操作MySql数据库
2021/05/31 Python
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL