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