bootstrap table小案例


Posted in Javascript onOctober 21, 2016

Bootstrap Table是基于Bootstrap的轻量级表格插件,只需要简单的配置就可以实现强大的支持固定表头、单复选、排序、分页、搜索以及自定义表头等功能。

1、所需要的库:

    bootstrap.min.css

    bootstrap-table.css

    jquery.min.js

    bootstrap.min.js

    bootstrap-table.js

2、Bootstrap Table获取数据的方式:

    Bootstrap Table通过data属性标签或者JavaScript来显示表格数据:

(1)、通过data属性标签

 在表格中设置data-toggle=“table”,此方式可以在不写JavaScript的情况下启用Bootstrap Table。

<table data-toggle="table" data-url="data.json">
  <thead>
    ...
  </thead>
</table>

(2)、通过JavaScipt向表格传入数据:

<table id="table"></table>
      <1>、简单的静态数据

        $('#table').bootstrapTable({        
          columns: [{
            field: 'id',
            title: 'Item ID'
          }, {
            field: 'username',
            title: 'Item Username'
          }, {
            field: 'password',
            title: 'Item Passowrd'
          }],
          data: [{
            id: 1,
            username: 'Item 1',
            passowrd: '$1'
          }, {
            id: 2,
            username: 'Item 2',
            password: '$2'
          }]});
           <2>、通过url获取数据

        $('#table').bootstrapTable({        
          url: 'data1.json',
          columns: [{
            field: 'id',
            title: 'Item ID'
          }, {
            field: 'username',
            title: 'Item Username'
          }, {
            field: 'passowrd',
            title: 'Item Passowrd'
          }, ]});

3、Bootstrap Table简单的demo:

<!doctype html>
<html>
  <head>
  
    <meta charset="utf-8">
    
    <title>Bootstrap Table的demo</title>
    
    <link rel="stylesheet" href="bootstrap.css">
    
    <link rel="stylesheet" href="bootstrap-table.css">
  
  </head>
  
<body>
 <table id="table"></table>
<!--引入相关的js文件-->
 <script src="jquery.min.js"></script>
 <script src="bootstrap.js"></script>
 <script src="bootstrap-table.js"></script>
  
 <!--自定义javaScript-->
 <script>
   $('#table').bootstrapTable({
    columns: [{
      field: 'id',
      title: 'Item ID'
      }, {
      field: 'username',
      title: 'Item Username'
      }, {
      field: 'passsword',
      title: 'Item Password'
    }],
    data: [{
      id: 1,
      username: 'Item 1',
      passowrd: '123'
      }, {
      id: 2,
      username: 'Item 2',
      passowrd: '123
      }]
   });
 </script>
</body>
</html>

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

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

Javascript 相关文章推荐
获取URL地址中的文件名和参数的javascript代码
Sep 02 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
JS检测图片大小的实例
Aug 21 Javascript
javascript中的window.location.search方法简介
Sep 02 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
Jun 03 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
如何使用VuePress搭建一个类型element ui文档
Feb 14 Javascript
Vue h函数的使用详解
Feb 18 Vue.js
jquery+Jscex打造游戏力度条
Sep 12 #Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 #Javascript
node.js学习之base64编码解码
Oct 21 #Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 #Javascript
利用Node.JS实现邮件发送功能
Oct 21 #Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 #Javascript
BootStrap网页中代码显示用法详解
Oct 21 #Javascript
You might like
WHOIS类的修改版
2006/10/09 PHP
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
php strftime函数获取日期时间(switch用法)
2018/05/16 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
Javascript中设置默认参数值示例
2014/09/11 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
JavaScript window.location对象
2014/11/14 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
vue观察模式浅析
2018/09/25 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
python写xml文件的操作实例
2014/10/05 Python
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
Python实现Linux监控的方法
2019/05/16 Python
详解利用Python scipy.signal.filtfilt() 实现信号滤波
2019/06/05 Python
Django admin.py 在修改/添加表单界面显示额外字段的方法
2019/08/22 Python
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
美国Curacao百货连锁店网站:iCuracao.com
2019/07/20 全球购物
信息科学与技术专业求职信范文
2014/02/20 职场文书
农民工工资承诺书范文
2014/03/31 职场文书
战略合作意向书
2014/07/29 职场文书
创新社会管理心得体会
2014/09/12 职场文书
八月一日观后感
2015/06/10 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书
深度学习详解之初试机器学习
2021/04/14 Python
十大公认最好看的动漫:《咒术回战》在榜,《钢之炼金术师》第一
2022/03/18 日漫
mysql 排序失效
2022/05/20 MySQL
Web应用开发TypeScript使用详解
2022/05/25 Javascript