要加载的数据：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. Android Studio打包SDK后，为什么没有bundles文件夹？

    在Android Studio中,将项目打包成jar包,按照网上说的方法打包完成后,在intermediates文件夹下没有bundles,AS版本3.1.2,后来发现,原来是intermediate ...

  2. Hive分桶

    1.简介 分桶表是对列值取哈希值的方式将不同数据放到不同文件中进行存储.对于hive中每一个表,分区都可以进一步进行分桶.由列的哈希值除以桶的个数来决定数据划分到哪个桶里. 2.适用场景 1.数据抽样 ...

  3. windows笔记本触摸板的快捷键教程

    自从习惯了macbook的触摸板,根本就懒得使用鼠标.即实用,又便捷.但切换到windows笔记本的时候,总是不习惯使用触摸板. 今天查了一下微软的教程,发现windows现的已经做的相当不错了.但是 ...

  4. SQL Server 取日期时间格式 日期与字符串之间的转换

    SQL Server 取日期时间部分   在本文中,GetDate()获得的日期由两部分组成,分别是今天的日期和当时的时间: Select GetDate()  用DateName()就可以获得相应的 ...

  5. 转自阿里云邪-如何从小白成长为 Apache Committer?

    http://wuchong.me/blog/2019/02/12/how-to-become-apache-committer/ 过去三年,我一直在为 Apache Flink 开源项目贡献,也在两 ...

  6. 菜鸟学IT之简易四则运算程序开发

    作业要求来源:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/2166 作业要求: 任何编程语言都可以,命令行程序接受一个数字输入,然后 ...

  7. css之图片下方定位遮掩层

    需要的效果如图,图片下方加个遮掩层: html: <div class="listContent"> <div><img src="imag ...

  8. MySQL中的用户与授权

    grant all on *.* to root@'192.168.20.49'; grant select on *.* to root@192.168.20.49 ; -- dba 可以查询 My ...

  9. zookeeper-3.5.4-beta安装

    官网地址 https://zookeeper.apache.org/ 下载文件解压进入conf目录下将zoo_sample.cfg名称修改为zoo.cfg # The number of millis ...

  10. Java8新特性(一)_interface中的static方法和default方法

    什么要单独写个Java8新特性,一个原因是我目前所在的公司用的是jdk8,并且框架中用了大量的Java8的新特性,如上篇文章写到的stream方法进行过滤map集合.stream方法就是接口Colle ...