要加载的数据：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开发中调用python代码（带参数）

    android开发主要用到的是java代码,但是当开发涉及到一些算法时,往往用python可以提高软件的运行速度,也更加便捷,这里分享自己项目调用python代码的方式,主要有以下几个步骤(个人方法, ...

  2. PL/SQL连接数据库时报错12154

    研究了半天,最终我发现和环境变量没有半毛钱关系,就是tsnnames这个文件的格式错了.

  3. 测者的测试技术手册：智能化测试框架EvoSuite的一个坑以及填坑方法

    问题 最近在不断地学习和探索EvoSuite框架的时候,在生产JUnit单元测试框架后,出现如下问题: Exception: Caused by: org.evosuite.runtime.TooMa ...

  4. JQ表格隔行换色

    <style type="text/css"> html, body { margin: 0; padding: 0; font-size: 15px; font-fa ...

  5. Microsoft Store应用安装路径和应用推荐——如何用Linux命令操控windows

    本人是cnblog萌新,刚学编程不久的菜鸟,这是我的第一篇博客,请各位轻喷 Microsoft store安装路径: 相信很多人都跟我一样有强迫症,文件找不到安装目录就不舒服.一开始在系统盘找不到Wi ...

  6. Ruby入坑指南

    1.1 简介 Ruby语言是由松本行弘(Matz)设计,是一门通用的.面向对象的.解释型语言. 1.2 Ruby?RUBY?ruby? 1.Ruby:用来表示编程的语言 2.ruby:是指一个计算机程 ...

  7. 最新webstorm

    https://blog.csdn.net/hdp134793/article/details/81530472 最新webstorm,立即装,还有小盒子要弄个备份的,还有公交卡 2019-3-17( ...

  8. Why Ambari is setting the security protocol of the kafka to PLAINTEXTSASL instead of SASL_PLAINTEXT?

    首页 / Data Ingestion & Streaming / Why Ambari is setting the security protocol of the kafka to PL ...

  9. 教你如何在Drcom下使用路由器上校园网(以广东工业大学、极路由1S HC5661A为例)

    免责声明: 在根据本教程进行实际操作时,如因您操作失误导致出现的一切意外,包括但不限于路由器变砖.故障.数据丢失等情况,概不负责: 该技术仅供学习交流,请勿将此技术应用于任何商业行为,所产生的法律责任 ...

  10. VMware Workstation14 安装Ubuntu18.04

    1 下载Vmware Workstations14破解版 百度网盘链接:https://pan.baidu.com/s/12yVxoPCJUAmdts4SUdzndg 提取码:bs0g 2 下载Ubu ...