文档章节

Bootstrap Table简单例子学习

Elven_Xu
 Elven_Xu
发布于 2015/12/31 15:42
字数 348
阅读 4362
收藏 7

1、Bootstrap Table简介

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

2、所需要的库:

    bootstrap.min.css

    bootstrap-table.css

    jquery.min.js

    bootstrap.min.js

    bootstrap-table.js

3、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'
                    }, ]});

4、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>

5、Bootstrap Table学习文档

http://wenzhixin.net.cn/p/bootstrap-table/docs/documentation.html

© 著作权归作者所有

Elven_Xu
粉丝 11
博文 19
码字总数 9167
作品 0
镇江
后端工程师
私信 提问
加载中

评论(2)

Elven_Xu
Elven_Xu 博主

引用来自“handsomeremain”的评论

请教一下,为什么使用<table data-toggle="table" data-url="data.json">后,还是无法加载数据?
js有问题吧
handsomeremain
handsomeremain
请教一下,为什么使用<table data-toggle="table" data-url="data.json">后,还是无法加载数据?
物联网学习笔记——构建RESTFul平台1

0.前言 前些时间顺着Yeelink学习了RESTFUL,使用PHP和Slim框架尝试实现简单的REST API,树莓派可通过GET方法获得JSON数据包,通过这种方式实现了树莓派和服务器(我的PC)的互动。但是由于没...

thinkyoung
2014/12/02
0
0
easyui-table表格客户端分页实例

版权声明:本文为博主原创文章,如需转载,请标明出处。 https://blog.csdn.net/alan_liuyue/article/details/76783083 一、前言 前一篇博客已经介绍了bootstrap-table的客户端分页,而本...

尘光掠影
2017/08/06
0
0
EasyUi 动态tabs 在实际项目中遇到问题与解决方法

需求: 1、点击菜单列表新增tab 2、点击切换按钮,隐藏左侧列表,tab宽度100%,再次点击还原 3、tab标签页的内容会用到bootstrap table插件与echart插件 遇到的问题 1、新增的iframe 高度用百...

tianyawhl
2018/06/11
76
0
bootstrap-table分页简单例子以及常见问题(文中带源码)

在使用bootstrap-table分页遇到不少问题,而且查了不少资料,这里总结一下。 1,导入JS错误 表现:加入bootstrap-table-zh-CN但是没有汉化,以及提示TypeError: $(...).bootstrapTable is n...

xpbob
2016/07/22
1K
0
XiaoBingBy/bing-upms

简介 Bing-UPMS是一个轻量级的Spring Boot快速开发平台,学习简单、轻量级、易扩展;使用最新技术。 DEMO Bing-UPMS DEMO-----------企业站点 Demo Bing-UPMS + 在线学习系统 点击观看 OSS ...

XiaoBingBy
2017/11/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法

下面的元素属性和元素方法都通过 elem.属性 或 elem.方法 的方式使用,window属性通过 window.属性 的方式使用,document属性则通过document调用: <script> /* ****** 元素视图属性 * offs...

Bing309
14分钟前
3
0
Apache Kafka快速入门指南

简介 Kafka是基于发布订阅的消息系统。最初起源于LinkedIn,于2011年成为开源Apache项目,然后于2012年成为Apache顶级项目。Kafka用Scala和Java编写,因其分布式可扩展架构及可持久化、高吞吐...

AiChinaTech
16分钟前
2
0
Discrete Cosine Transform [DCT] (离散余弦变换)

Discrete Cosine Transform [DCT] (离散余弦变换)

divenwu
16分钟前
2
0
如何玩转 TiDB 性能挑战赛?本文教你 30 分钟快速上手拿积分!

作者:wish 上周我们正式宣布了 TiDB 性能挑战赛。在赛季内,通过向 TiDB、TiKV、PD 贡献代码完成指定类别任务的方式,你可以获得相应的积分,最终你可以使用积分兑换礼品或奖金。在性能挑战...

TiDB
17分钟前
2
0
12、SpringMVC数据回显

数据回显方法 1.springmvc默认对pojo数据进行回显。 pojo数据传入controller方法后,springmvc自动将pojo数据放到request域,key等于pojo类型(首字母小写) 使用@ModelAttribute指定pojo回显...

快乐的瓶子
18分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部