首页 > bootstrap table 事件 > bootstrap table onRefresh刷新事件

bootstrap table onRefresh刷新事件

bootstrap table刷新按钮事件,当然开启了showRefresh:"true"显示刷新按钮,用户点击刷新按钮事件执行onRefresh事件。

onRefresh事件

返回参数如下。

参数名称 说明
params the additional parameters request to the server.

绑定onRefresh事件方法一

 $('#table').bootstrapTable({
            url: '/package/bootstrap-table-1.14.1/data.json',
            pagination: true, 
            search: true, 
            columns: columns,
            showRefresh:"true",//刷新按钮
            onRefresh:function(params)
            {
               alert(JSON.stringify(params));
            }
});

绑定onRefresh事件方法二

$('#table').on('refresh.bs.table', function (e,params){
   alert(JSON.stringify(params));
});

完整代码

<!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/bootstrap-table-1.14.1/jquery-3.3.1/jquery.js"></script>
    <link href="http://www.itxst.com/package/bootstrap-table-1.14.1/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet" />
    <link href="http://www.itxst.com/package/bootstrap-table-1.14.1/bootstrap-table-1.14.1/bootstrap-table.css" rel="stylesheet" />
    <script src="http://www.itxst.com/package/bootstrap-table-1.14.1/bootstrap-table-1.14.1/bootstrap-table.js"></script>
 <link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
    <title>bootstrap table onRefresh刷新事件例子</title>
    <style>
        .table-demo {
            width: 80%;
            margin: 30px auto 0px auto;
        }
    </style>
</head>
<body>
    <div class="table-demo">
        <table id="table"></table>
    </div>
    <script>
      
 
       // 设置需要显示的列
        var columns = [{
            field: 'Id',
            title: '编号'
        }, {
            field: 'ProductName',
            title: '产品名称'
        }, {
            field: 'StockNum',
            title: 'Item 库存'
        }];


        $('#table').bootstrapTable({
            url: '/package/bootstrap-table-1.14.1/data.json',
            pagination: true, 
            search: true, 
            columns: columns,
            showRefresh:"true",//刷新按钮
            onRefresh:function(params)
            {
               alert(JSON.stringify(params));
            }
        });
 
    </script>
</body>
</html>

在线试一试