bootstrap table refreshOptions 刷新配置的方法

bootstrap table refreshOptions 刷新配置,比如把某列从表中删除、设置新的服务器端分页网址、把每页显示10条数据修改成每页50条,都每页使用refreshOptions方法。刷新数据有refresh和refreshOptions方法,那么此函数和refresh的区别就是refresh没有参数,refresh在现有配置的情况下刷新数据重新获取数据更新UI。

使用方法

//把每页显示2条数据更新为每页显示5条数据
$('#table').bootstrapTable('refreshOptions', {pageSize:5});

在线试一试

完整代码

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://www.itxst.com/package/bootstrap-table-1.14.1/jquery-3.3.1/jquery.js"></script>
    <link href="https://www.itxst.com/package/bootstrap-table-1.14.1/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet" />
    <link href="https://www.itxst.com/package/bootstrap-table-1.14.1/bootstrap-table-1.14.1/bootstrap-table.css" rel="stylesheet" />
    <script src="https://www.itxst.com/package/bootstrap-table-1.14.1/bootstrap-table-1.14.1/bootstrap-table.js"></script> 
    <title>bootstrap table refreshOptions刷新配置在线例子</title>
    <style>
        .table-demo {
            width: 80%;
            margin: 30px auto 0px auto;
        }
      .titles {
  float: right;
  clear: both;
}
    </style>
</head>
<body>
  <div id="toolbar">
    <button onclick="update()">更新配置</button> 
  </div>
    <div class="table-demo">
        <table id="table"  ></table>
    </div>
    <script>
        //设置需要显示的列
        var columns = [
           { 
           field:"Id",  
          title: 'ID'
        }, {
            field: 'XName',
            title: 'Name'
        }, {
            field: 'StockNum',
            title: 'Num'
        } ];


        //需要显示的数据
        var data = [{
            Id: 1000,
            XName: 'N1',
            StockNum: '1'
        }, {
            Id: 1002,
            XName: 'N2',
            StockNum: '2'
        }, {
            Id: 1003,
            XName: 'N3',
            StockNum: '3'
        }, {
            Id: 1004,
            XName: 'N4',
            StockNum: '4'
        }];
        //bootstrap table初始化数据
        $('#table').bootstrapTable({  
            toolbar:"#toolbar", 
            columns: columns, 
            data: data,
            pageSize:2,
            pagination:true
        });
      
     function update()
      {
        $('#table').bootstrapTable('refreshOptions', {pageSize:5});
      }
           
    </script>
</body>
</html>