要加载的数据：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/

转载于:https://www.cnblogs.com/jhxxb/p/10785218.html

BootstrapTable-加载数据相关推荐

bootstrap-table 一直显示“正在努力地加载数据中，请稍候”的问题
bootstrap-table一直显示"正在努力地加载数据中,请稍候"的问题 bootstrap-table 问题答案参考 bootstrap-table bootstrap- ...
HTML5数据加载中请稍后效果,IE8浏览器中一直处于“正在努力地加载数据中，请稍候……”...
我先详细的描述我的开发环境: OS: windows 7 Browser: IE 8.0.76 (64-bit) bootstrap-table v1.11.1 jQuery v1.11.3 Boot ...
bootstrap列表加序号_bootstrap-table加载数据序号自增实现
初始化表格时,序号自增实现方法: $("#table-list-webhoo").bootstrapTable({ ......... //省略了相应的参数配置 columns : ...
在NVIDIA A100 GPU中使用DALI和新的硬件JPEG解码器快速加载数据
在NVIDIA A100 GPU中使用DALI和新的硬件JPEG解码器快速加载数据如今,最流行的拍照设备智能手机可以捕获高达4K UHD的图像(3840×2160图像),原始数据超过25 MB.即使 ...
android 按住拖动gallery防止马上加载数据导致gallery卡的方法
gallery菜单滑动有一个不好的效果就是每次经过中间的菜单都默认是被选中状态,同时会加载数据以至于切换不流畅,有一种卡卡的感觉!!其实用线程来处理这个问题,一定的时间后如果选择的index值不变, ...
学习下ECharts 异步加载数据
ECharts 通常数据设置在 setOption 中,如果我们需要异步加载数据,可以配合 jQuery等工具,在异步获取数据后通过 setOption 填入数据和配置项就行. ECharts 通常数 ...
datatables增删改查php,jQuery+datatables插件实现Ajax加载数据与增删改查功能示例_白峰_前端开发者...
本文实例讲述了这里给大家分享一下我在项目中用datatables实现ajax加载数据与增删改查注意,需要引入  搜索  新增  编辑  删除职业姓名性别爱好 //点击查找 $(" ...
使用np.load()加载数据报错 Object arrays cannot be loaded when allow_pickle=False
使用np.load()加载数据报错 Object arrays cannot be loaded when allow_pickle=False https://blog.csdn.net/weix ...
Android开发之ContentProvider结合LoaderManager加载数据（图文源代码分享）
ContentProvider作为Android的四大存储方式之一,有着广泛的应用性,它暴露了数据地址,可以让其他应用访问数据,可以用于存储图片.通讯录等信息,这篇博文将详细介绍ContentProv ...
Android开发之通过接口回调机制加载数据（源代码分享）
Android开发之通过接口回调机制加载数据的简单实现,在实际开发中通过callback方法得到网络加载的数据的使用频率远比通过直接开启线程或异步任务加载数据的频率高的多,这篇文章的代码将简单实现该机 ...

BootstrapTable-加载数据

代码

结果

BootstrapTable-加载数据相关推荐

最新文章

热门文章