Bootstrap-table学习笔记（一）

第一次使用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'}, ]
});

转载于:https://www.cnblogs.com/net-safe/p/6867268.html

Bootstrap-table学习笔记（一）相关推荐

bootstrap框架学习笔记
bootstrap框架学习笔记 1.Bootstrap简介 2.基本使用 3.容器 4.设备划分 5.栅格系统 6.展示与隐藏 7.其他类前缀 8.组件直接参考开发文档 1.Bootstrap简介 B ...
快速构建网站或移动端页面：关于Bootstrap的学习笔记
最近在设计官网,并进行一些项目的原型设计和开发,寻找了很久,想找到一个更简单.快速的方式,基于一些已有的模板或框架进行快速建设,结果发现很多时间都是徒劳,走过的路分享给大家,以防再度踩坑: 网上搜索原 ...
Bootstrap的学习笔记
1 前言今天开始学习Bootstrap啦~ 2 布局--container 2.1 container的左右两侧会有空白--px-0 container的两侧可能会出现空白,(如果设置了背景色,就会 ...
Vue Bootstrap 结合学习笔记（一）
本文是不才在学习Vue和Bootstrap过程中遇到问题解决的一些思路,主要描述了项目搭建,组件封装.获取.编辑.更新的一步步实现,一些解决方案也没找到正确的官方API,还请大拿们多多提点. 项目介绍 ...
Bootstrap组件学习笔记（一）——大纲、Glyphicons字体图标和下拉菜单
目录: 1.组件学习大纲 2.Glyphicons字体图标 3.下拉菜单 1.组件学习大纲 2. Glyphicons字体图标 bootstrap含有接近250多个字体图标( 图标表格地 ...
Lua 函数类 Table --学习笔记
--[[ Table: 元方法: 当表达式中混合了不同元表的值时, 先看第一个值有无对应元表, 没有再看第二个对象的. 两个对象都没有,应发一个错误. 算术类的:__add加法, __mul乘法, _ ...
php bootstrap 分页查询,深入了解Bootstrap table表格插件（二）前后端分页模糊查询...
这篇文章主要为大家分享了Bootstrap table学习笔记,前后端分页模糊查询,具有一定的参考价值,感兴趣的小伙伴们可以参考一下在使用过程中,一边看文档一边做,遇到了一些困难的地方,在此记录一下 ...
Bootstrap学习笔记系列1-------Bootstrap网格系统
目录 Bootstrap网格系统学习笔记简单网格偏移列嵌套列列排序 Bootstrap网格系统学习笔记简单网格先上代码再解释 <!DOCTYPE html> <htm ...
miniui文件上传 linux,MINIUI grid学习笔记
grid 控件 a.事件的绑定和移除 grid.on("rowclick", fn); //绑定事件 (这个的话类似jquery的绑定事件) grid.un("rowcl ...
Bootstrap学习笔记02【全局CSS样式、组件和插件、案例_黑马旅游网_首页】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...

Bootstrap-table学习笔记（一）

Bootstrap-table学习笔记（一）相关推荐

最新文章

热门文章