方法1(对普通的 table 设置 data-toggle="table" 即可）:

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8"/>

    <meta lang="zh"/>

    <title>select2</title>

    <script src="js/jquery-3.3.1.js"></script>

    <link href="css/select2.css" rel="stylesheet" />

    <link rel="stylesheet" href="css/bootstrap.css">

    <link rel="stylesheet" href="css/bootstrap-table.css">

    <script src="js/bootstrap.min.js"></script>

    <script src="js/bootstrap-table.js"></script>

    <script src="js/select2.js"></script>

    <script type="text/javascript">

    </script>

</head>

<body>

<div>

    <table data-toggle="table">

        <thead>

        <tr>

            <th>Item ID</th>

            <th>Item 名称</th>

            <th>Item 价格</th>

        </tr>

        </thead>

        <tbody>

        <tr>

            <td>1</td>

            <td>电脑</td>

            <td>$1000</td>

        </tr>

        <tr>

            <td>2</td>

            <td>冰箱</td>

            <td>$500</td>

        </tr>

        </tbody>

    </table>

</div>

</body>

</html>

2.方法2(javascript）：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8"/>

    <meta lang="zh"/>

    <title>select2</title>

    <script src="js/jquery-3.3.1.js"></script>

    <link href="css/select2.css" rel="stylesheet" />

    <link rel="stylesheet" href="css/bootstrap.css">

    <link rel="stylesheet" href="css/bootstrap-table.css">

    <script src="js/bootstrap.min.js"></script>

    <script src="js/bootstrap-table.js"></script>

    <script src="js/select2.js"></script>

    <script type="text/javascript">

    </script>

</head>

<body>

<div>

    <table id = "demo">

    </table>

</div>

<script type="text/javascript">

    $('#demo').bootstrapTable({

        columns: [{

            field: 'id',

            title: 'ID'

        }, {

            field: 'name',

            title: '商品'

        }, {

            field: 'price',

            title: '价格'

        }],

        data: [{

            id: 1,

            name: '电脑',

            price: '$1000'

        }, {

            id: 2,

            name: '冰箱',

            price: '$500'

        }]

    });

</script>

</body>

</html>

3.远程：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8"/>

    <meta lang="zh"/>

    <title>select2</title>

    <script src="js/jquery-3.3.1.js"></script>

    <link href="css/select2.css" rel="stylesheet" />

    <link rel="stylesheet" href="css/bootstrap.css">

    <link rel="stylesheet" href="css/bootstrap-table.css">

    <script src="js/bootstrap.min.js"></script>

    <script src="js/bootstrap-table.js"></script>

    <script src="js/select2.js"></script>

    <script type="text/javascript">

    </script>

</head>

<body>

<div>

    <table data-toggle="table" data-url="data1.json">

        <thead>

        <tr>

            <th data-field="id">ID</th>

            <th data-field="name">商品</th>

            <th data-field="price">价格</th>

        </tr>

        </thead>

    </table>

</div>

</body>

</html>

javascript入门 之 用bootstrap-table写一个表格的更多相关文章

  1. 只有20行Javascript代码！手把手教你写一个页面模板引擎

    http://www.toobug.net/article/how_to_design_front_end_template_engine.html http://barretlee.com/webs ...

  2. bootstrap做了一个表格

    花了一下午做了一个表格: 大致是这样: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf ...

  3. JavaScript写一个表格排序类

    依稀记得那是上个星期六的下午,我参加了网易暑期实习生招聘笔试.考得相当糟糕,编程题3个题通过了2个,简答题没做对,选择题貌似是20个题猜了6-7个,99%是挂了,唉唉唉!生活不只眼前的苟且,学习的脚步 ...

  4. 使用bootstrap table小记（表格组件）

    前言 新的一年悄然到来,生活依旧.最近一周大热的赵雷风,一首<成都>,一首<理想>再次把民谣展示在国人面前.歌词着实写的不错. 理想,你今年几岁 你总是诱惑着年轻的朋友 你总是 ...

  5. Bootstrap table 实现树形表格，实现联动选中，联动取消

    公司最近有需求要做树形式table.因为是前后端不分离项目,且之前已经引入了bootstrap table插件,现把实现方式分享一下: <!DOCTYPE HTML> <html l ...

  6. [JavaScript] 的异步编程之手写一个Gernerator的例子

    <html> <head> <meta charset="UTF-8"> <title>Generator Demo</tit ...

  7. javascript小记四则：用JS写一个滚动横条文字，可以根据需要进行修改；

    网页上的一些广告文字,一直会滚动是怎么做到的,今天给大家演示下,非常简单,源码如下(本案例是在.net平台上,但HTML是通用的): <!DOCTYPE html> <html> ...

  8. C#索引器的应用：自已写一个表格

    C#中索引器,在一个类中有很多的同一类型成员的时候,比较适用索引器. 环境:我们假设有一个动物园,里边有很多动物. 用法: 1.先定义一个类,这是成员的类型.在这里就是要定义一个Animal类: pu ...

  9. bootstrap table 生成的表格里动态添加HTML元素按钮，JS中添加点击事件，点击没反应---解决办法

    bootstraptable中onExpandRow属性---js  方法添加的 html代码,然后给这代码里面的 元素 添加 事件,却获取不该元素.(称之为未来元素),由于是未来的 所以现在没有这个 ...

随机推荐

  1. vue2.0：项目开始，首页入门（main.js，App.vue,importfrom）

    对main.js App.vue 等进行操作: 但是这就出现了一个问题:什么是main.js,他主要干什么用的?App.vue又是干什么用的?main.js 里面的import from又在干嘛?ne ...

  2. el-select下拉加载（实现懒加载）

    情况:项目出现了下拉数据量过大,出现页面卡死问题,反馈到我这:当时实现思路1.使用render函数去渲染下拉框 试了发现卡死情况依然存在,所以尝试方法2 2.使用原生js去添加下拉框的<opti ...

  3. props watch 接口抖动

    readType (val) { this.innerReadType = '-' this.$nextTick(() => { this.innerReadType = val }) },

  4. The Game Of Life – 数据结构与算法的敲门砖

    The Game Of Life(生命游戏,又称为细胞自动机)几乎是所有数据结构与算法导论教程前言的一个很经典的程序了.这是一个零玩家游戏,发生在一个平面网格里.每个格子的细胞都有死亡和存活两种状态, ...

  5. java实现简单的星座查询

    在校小白,大神勿喷. 版本已简化 连接mysql数据库验证用户名及密码进行登陆 public class mysql {Connection con;public mysql(){    try{   ...

  6. 03-Vue数据请求

    1. vue-resource vue-resource jsonp请求 <body> <div id="app"> <!-- v-model 监听表 ...

  7. 网络安全从入门到精通(第二章-3)后端基础SQL— MySQL高级查询与子查询

    本文内容: MySQL的基础查询语句 链接查询 联合查询 子查询 渗透测试常用函数 1,MySQL基础查询语句: select * from 表 order  by ASC/DESC; ASC:从小到 ...

  8. Java8 Stream流

    第三章 Stream流 <Java8 Stream编码实战>的代码全部在https://github.com/yu-linfeng/BlogRepositories/tree/master ...

  9. 关于Web2.0

    前言:本来是想写HTML的,发现没什么好写的,就简单写一下Web2.0好了 什么是Web 2.0: "Web 2.0 is the business revolution in the co ...

  10. RDD的Cache、Persist、Checkpoint的区别和StorageLevel存储级别划分

    为了增强容错性和高可用,避免上游RDD被重复计算的大量时间开销,Spark RDD设计了包含多种存储级别的缓存和持久化机制,主要有三个概念:Cache.Persist.Checkout. 1.存储级别 ...