要加载的数据：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. 深圳市共创力咨询CEO杨学明的最新演讲：互联网模式下的企业创新管理

    2018年11月14日, 深圳市共创力咨询董事长.深圳市汇成研发管理咨询公司董事长杨学明先生受邀参加由深圳图书馆主办,深圳手讯视频承办的“倾听行业之声”2018第二届世界CED智慧大会,此次分享的主题 ...

  2. curl 命令-接口测试

    在linux/Unix 为代表的os上, 对后端进行测试, 模拟连接请求都会书写脚本 场景: 在Linux 上接口测试工具有ab, restClient, postman等, 最常用的方法是curl进 ...

  3. 【SpringBoot笔记】SpringBoot整合Druid数据连接池

    废话少说,按SpringBoot的老套路来. [step1]:添加依赖 <!-- 数据库连接池 --> <dependency> <groupId>com.alib ...

  4. 订制rpm包到Centos7镜像中

    本文以CentOS 7.4 最小化镜像(CentOS-7-x86_64-Minimal-1708.iso)为模版 要达到的目的: 1.订制所需的rpm软件包集成到iso文件中 2.制作完成的ISO全自 ...

  5. 在windows系统下安装linux虚拟机（VMware）

    一.下载Vmware安装包(此处我安装的是VMware-workstation-full-14.1.3) 链接: https://pan.baidu.com/s/12xT1JaA7eheEgFfM-2 ...

  6. Linux：Day9(上) 压缩工具

    压缩.解压缩及归档工具 compress/uncompress:.Z # 现在已经很少在见到了 gzip/gunzip:.gz bzip2/bunzip2:.bz2 xz/unxz:.xz # 目前推 ...

  7. CF396C On Changing Tree

    CF396C On Changing Tree 给定一棵以 \(1\) 为根的树,初始时所有点权为 \(0\) 有 \(m\) 次操作,分为两种 \(1\ u\ x\ k\) 表示给以 \(u\) 的 ...

  8. Vue（五）Vue规范

    代码规范很重要 1.组件名应该始终是多个单词的,根组件 App 除外. 2.组件的 data 必须是一个函数. // In a .vue file export default { data () { ...

  9. 分布式存储ceph——（5）ceph osd故障硬盘更换

    正常状态:

  10. [Bilingual] Different proofs of Jordan cardinal form (Jordan标准型的几种证明)