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

 更新时间:2017年05月18日 08:46:40   作者:邓晓晖  
这篇文章主要为大家介绍了第一次学习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'
 }, ]
});

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

相关文章

  • JS对大量数据进行多重过滤的方法

    JS对大量数据进行多重过滤的方法

    今天在工作中遇到一个问题,当前端通过Ajax从后端取得了大量的数据,需要根据一些条件过滤,但是发现写的过滤方法有问题,后来仔细的查找问题,通过网上的资料终于解决了这个问题,现在将解决的过程以及解决方法分享给大家,有需要的朋友们可以参考借鉴。
    2016-11-11
  • 给Function做的OOP扩展

    给Function做的OOP扩展

    自编框架Megami的一部分……现在发现自己实在太宅了…… 文件中出现的名字请对号入座……
    2009-05-05
  • 如何用CocosCreator制作微信小游戏

    如何用CocosCreator制作微信小游戏

    这篇文章主要介绍了如何用CocosCreator制作微信小游戏,从下载工具到配置,最后连接微信小游戏预览,一步步很详细,希望读者们仔细看一下
    2021-04-04
  • JavaScript中的console.assert()函数介绍

    JavaScript中的console.assert()函数介绍

    这篇文章主要介绍了JavaScript中的console.assert()函数介绍,assert()函数是一个调试中经常使用的断言工具函数,需要的朋友可以参考下
    2014-12-12
  • 通过JAVASCRIPT读取ASP设定的COOKIE

    通过JAVASCRIPT读取ASP设定的COOKIE

    通过JAVASCRIPT读取ASP设定的COOKIE...
    2007-02-02
  • JavaScript实现消息对话框

    JavaScript实现消息对话框

    这篇文章主要为大家详细介绍了JavaScript实现消息对话框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • 如何学JavaScript?前辈的经验之谈

    如何学JavaScript?前辈的经验之谈

    这篇文章主要介绍了如何学JavaScript?前辈的经验之谈,也就是怎么学前端的问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 编程语言JavaScript简介

    编程语言JavaScript简介

    这篇文章主要介绍了编程语言JavaScript简介,本文讲解了JavaScript是什么、JavaScript特点、JavaScript和Java的区别等内容,需要的朋友可以参考下
    2014-10-10
  • 详解Next.js页面渲染的优化方案

    详解Next.js页面渲染的优化方案

    这篇文章主要介绍了详解Next.js页面渲染的优化方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • JavaScript实现跨浏览器的添加及删除事件绑定函数实例

    JavaScript实现跨浏览器的添加及删除事件绑定函数实例

    这篇文章主要介绍了JavaScript实现跨浏览器的添加及删除事件绑定函数,采用纯javascript实现jquery的bind及unbind添加与删除事件绑定的技巧,具有很好的浏览器兼容性,需要的朋友可以参考下
    2015-08-08

最新评论