bootstrap table Refresh重新加载数据的方法
辛锦
bootstrap table refresh重新加载数据的方法，同时也可重新设置分页相关的配置和refreshOptions方法类似。
refresh方法
| 参数名称 | |
| params | 需要更新的配置 |
代码例子
//重新加载数据
$('#table').bootstrapTable('refresh');
//重新加载数据,并设置每页显示10
$('#table').bootstrapTable('refresh', {pageSize:10});
完整例子
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="http://www.itxst.com/package/jquery-3.3.1/jquery.js"></script>
<link href="http://www.itxst.com/package/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet" />
<link href="http://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.css" rel="stylesheet" />
<script src="http://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.js"></script>
<title>bootstrap table refresh在线例子</title>
<style>
.table-demo {
width: 80%;
margin: 30px auto 0px auto;
}
.fixed-table-header {
border-right: solid 1px #ddd;
border-top: solid 1px #ddd;
}
.fixed-table-header table {
border-top: solid 0px #ddd !important;
margin-top:-1px;
}
</style>
</head>
<body >
<div id="toolbar">
<button onclick="ck(1)">refresh刷新请求</button>
<button onclick="ck(2)">refresh刷新请求同时更新pageSize</button>
<button onclick="getOps()">点击获取配置</button>
</div>
<div>
<table id="table"></table>
</div>
<script>
//设置需要显示的列
var columns = [{
field: 'Id',
title: '编号'
}, {
field: 'ProductName',
title: '名称'
}, {
field: 'StockNum',
title: '库存'
}];
//bootstrap table初始化数据
$('#table').bootstrapTable({
toolbar:"#toolbar",
columns: columns,
classes: "table table-bordered table-striped table-sm table-dark", //设置表格样式
height:400,
//******服务器端分页设置****
url: "/package/bootstrap-table-1.14.1/data.json", //服务器返回数据的网址
method: 'GET', //数据请求方式
sidePagination:'server',
pagination:true,
pageNumber:1,
pageSize:2,
pageList:"[10, 20, 50, 200]",
paginationHAlign:"left",
paginationDetailHAlign:"right",
queryParams:function(params) {
/******获取分页数据时，这里你可以带上你自定义的参数******/
params.action="getlist";
params.catalogId=0;
return params; }
//******服务器端分页设置****
});
function ck(icase)
{
if(icase===1)
{
$('#table').bootstrapTable('refresh');
}
if(icase===2)
{
$('#table').bootstrapTable('refresh', {pageSize:10});
}
}
function getOps()
{
var ops=$('#table').bootstrapTable('getOptions');
alert(JSON.stringify(ops));
alert("获取每页显示条数："+ops.pageSize);
}
</script>
</body>
</html>
类似资料：