要加载的数据：https://examples.wenzhixin.net.cn/examples/bootstrap_table/data?search=&order=asc&offset=0&limit=10

代码

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>Table</title>

    <!--jquery-->

    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>

    <!--bootstrap-->

    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>

    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <!--bootstrap-table-->

    <link href="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.js"></script>

    <!--bootstrap-table-lanuage-->

    <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table-locale-all.min.js"></script>

</head>

<body>

<div class="container">

    <div class="select">

        <select class="form-control" id="locale">

            <option value="zh-CN" selected>zh-CN</option>

            <option value="zh-TW">zh-TW</option>

            <option value="en-US">en-US</option>

        </select>

    </div>

    <div>

        <table id="table"></table>

    </div>

</div>

<script>

    var $table = $('#table');

    var datas = [];

    $(function () {

        $.ajax({

            url: "https://examples.wenzhixin.net.cn/examples/bootstrap_table/data?search=&order=asc&offset=0&limit=10",

            success: function (d) {

                if (d) {

                    datas = d.rows;

                    // 初始化表格

                    initTable();

                }

            }

        });

    });

    $('#locale').change(initTable);

    function initTable() {

        // 先销毁再创建

        $table.bootstrapTable('destroy').bootstrapTable({

            data: datas,// 表格数据

            locale: $('#locale').val(),// 语言

            classes: 'table table-bordered table-hover table-striped', // 样式，table-striped 隔行变色

            columns: [ // 列详情

                {

                    title: 'ID',// 表头字段名

                    field: 'id',// 数据 key

                    sortable: true,// 排序

                    align: 'center',// 居中

                }, {

                    title: 'Item Name',

                    field: 'name',

                    align: 'center'

                }, {

                    title: 'Item Price',

                    field: 'price',

                    align: 'center',

                    formatter: function (value, row, index) { // 处理该行数据

                        if (value == '$0') {

                            return "haha!"

                        } else {

                            return value;

                        }

                    }

                }

            ]

        });

    }

</script>

</body>

</html>

结果

例子：https://examples.bootstrap-table.com/#welcome.html

API：https://bootstrap-table.com/docs/api/table-options/

BootstrapTable-加载数据的更多相关文章

  1. Bootstrap-Select 动态加载数据的小记

    关于前端框架系列的可以参考我我刚学Bootstrap时候写的LoT.UI http://www.cnblogs.com/dunitian/p/4822808.html#lotui bootstrap- ...

  2. winform异步加载数据到界面

    做一个学习记录. 有两个需求: 1.点击按钮,异步加载数据,不卡顿UI. 2.把获取的数据加载到gridview上面. 对于需求1,2,代码如下: public delegate void ShowD ...

  3. Ajax 加载数据 练习 自我有些迷糊了，写的大概请谅解 ^ _ ^

    查询表的显示,查询显示如果不嵌入PHP代码的话,用ajax怎么实现?   <h1>显示数据</h1> <table width="100%" bord ...

  4. 分页插件思想：pc加载更多功能和移动端下拉刷新加载数据

    感觉一个人玩lol也没意思了,玩会手机,看到这个下拉刷新功能就写了这个demo! 这个demo写的比较随意,咱不能当做插件使用,基本思想是没问题的,要用就自己封装吧! 直接上代码分析下吧! 布局: & ...

  5. 使用 jQuery Ajax 在页面滚动时从服务器加载数据

    简介 文本将演示怎么在滚动滚动条时从服务器端下载数据.用AJAX技术从服务器端加载数据有助于改善任何web应用的性能表现,因为在打开页面时,只有一屏的数据从服务器端加载了,需要更多的数据时,可以随着用 ...

  6. 向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)[上拉加载组件]

    /**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...

  7. AppCan学习笔记----关闭页面listview动态加载数据

    AppCan页面关闭 AppCan 的页面是由两个HTML组成,如果要完全关闭的话需要在主HTML eg.index.html中关闭,关闭方法:appcan.window.close(-1); 管道 ...

  8. Web App 向上滑动动态加载数据 2015-06-11 09:36 20人阅读 评论(0) 收藏

    好久没有写博客了 - - ,个人原因 个人原因..  宣传一下...自己的.NET群:252713569 欢迎各位大神加入 嗯..最近在公司开发微信平台的东西..需要做一个WebAPP(PS:其实就是 ...

  9. 淘宝购物车页面 智能搜索框Ajax异步加载数据

    如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...

  10. jquery easyui使用（三）······datagrid加载数据(已解决)

    <div id="table_Data"> </div> $("#table_Data").datagrid({ toolbar: '# ...

随机推荐

  1. Linux下LANMP集成环境中编译增加pdo_odbc模块

    linux版本为CentOs6.5,php集成环境为lanmp_v3.1,集成环境中默认的pdo扩展为:mysql, sqlite, sqlite2,现在有需求想链接微软的Access数据库,所以需要 ...

  2. （爬虫）urllib库

    一.爬虫简介 什么是爬虫?通俗来讲爬虫就是爬取网页数据的程序. 要了解爬虫,还需要了解HTTP协议和HTTPS协议:HTTP协议是超文本传输协议,是一种发布和接收HTML页面的传输协议:HTTPS协议 ...

  3. socket.io 出现的WebSocket is closed before the connection is established

    WebSocket is closed before the connection is established 最近socket.io是挺流行的,幼麟棋牌和一些好的开源项目也使用这个框架,在搭建其平 ...

  4. DEDECMS 漏洞修复方案

    目录 DEDECMS支付模块注入漏洞 漏洞文件: /include/payment/alipay.php 漏洞描述: 对输入参数$_GET['out_trade_no']未进行严格过滤 修复方案: 对 ...

  5. 【shell基础】if分支语句

    1.if判断式if [ 条件判断一 ] && (||) [ 条件判断二 ]; thenelif [ 条件判断三 ] && (||) [ 条件判断四 ]; thenels ...

  6. python学习笔记3_抽象

    这一步的学习四个知识点,如何将语句组织成函数,参数,作用域(scope),和递归 一.函数 1.抽象和结构 抽象可以节省很多的工作量,实际上它的作用更大,它是使得计算机程序让人读懂的关键(这也是最基本 ...

  7. P4015 运输问题 网络流问题

    题目描述 WW 公司有 mm 个仓库和 nn 个零售商店.第 ii 个仓库有 a_iai​ 个单位的货物:第 jj 个零售商店需要 b_jbj​ 个单位的货物. 货物供需平衡,即\sum\limits ...

  8. animation动画案例

    最近一直苦恼做一个banner的进度条,原先用js改变width值,但明显卡顿.后来用了animation,超级好用. <!DOCTYPE html> <html lang=&quo ...

  9. Day 2 下午

    [POJ 3468]A Simple Problem with Integers给定Q个数A1, ..., AQ,多次进行以下操作:1.对区间[L, R]中的每个数都加n.2.求某个区间[L, R]中 ...

  10. Mysql 中的日期时间字符串查询

    一.将数据库中的Date格式的数据,或者指定日期的字符串格式化为想要的样式 DATE_FORMAT (date, format)能根据格式串format 格式化日期或日期和时间值date,返回结果字符 ...