jQuery框架bootstrap-table中开启加载提示
在jQuery框架的bootstrap-table插件中，可以通过设置showLoading选项来启用表格的加载提示。以下是一个简单的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Table Loading Example</title>
<meta charset="utf-8">
<link rel="stylesheet" href="path/to/bootstrap.min.css">
<link rel="stylesheet" href="path/to/bootstrap-table.min.css">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/bootstrap.min.js"></script>
<script src="path/to/bootstrap-table.min.js"></script>
</head>
<body>
<div id="toolbar">
<button id="btn-load" class="btn btn-primary">Load Table</button>
</div>
<table id="myTable"
data-toggle="table"
data-toolbar="#toolbar"
data-show-loading-text="Loading Data..."
data-show-loading="true">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
</table>
<script>
$(function() {
var $table = $('#myTable');
$('#btn-load').click(function() {
$table.bootstrapTable('showLoading');
// 模拟异步数据加载
setTimeout(function() {
$table.bootstrapTable('hideLoading');
// 加载数据到表格
$table.bootstrapTable('load', [
{
name: 'John',
age: 25
},
{
name: 'Jane',
age: 29
}
]);
}, 1000); // 模拟加载时延
});
});
</script>
</body>
</html>在这个示例中，我们定义了一个带有加载按钮的工具栏，并且在按钮点击事件中使用showLoading方法来显示加载提示。然后我们使用setTimeout模拟了一个异步加载数据的过程，加载完成后通过hideLoading方法隐藏加载提示，并通过load方法将数据加载到表格中。
请确保替换path/to/为你的实际路径，并根据你的实际需求调整表格的列和数据。
评论已关闭