首页 > bootstrap table 方法 > bootstrap table getData获取表格数据的方法

bootstrap table getData获取表格数据的方法

bootstrap table getData获取表格的数据,该方法新版和老版本有区别,因为新版本增加了隐藏行的功能而老版本没有。老版本1个参数是否获取包含分页的数据,新版本增加了一个是否获取包含隐藏行的数据。
:当然这里说的分页是指前端分页,想想也不可能是指服务器端分页的数据

老版本getData

//只获取当前页的数据,比如有10页数据,当前一页只获取第一页的数据
var data= $('#table').bootstrapTable('getData',true);
//获取包含分页的数据,比如有10页数据,获取全部10页的数据
var data= $('#table').bootstrapTable('getData',false);

新版本getData

参数名称参数说明
useCurrentPage设置为true获取当前页码的数据;设置为false获取表格全部页码的数据
includeHiddenRows设置true包含隐藏行的数据;设置false不包含隐藏行的数据

//只获取当前页的数据,包含隐藏行
var data= $('#table').bootstrapTable('getData',{useCurrentPage:true,includeHiddenRows:true});
//获取包含分页的全部数据,但是不包含隐藏行的数据
var data= $('#table').bootstrapTable('getData',{useCurrentPage:false,includeHiddenRows:false});

老版本在线演示   新版本在线演示

完整代码

<!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-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> 
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
<title>bootstrap table getData在线例子</title>
    <style>
        .table-demo {
            width: 80%;
            margin: 30px auto 0px auto;
        }
      .titles {
  float: right;
  clear: both;
}
    </style>
</head>
<body>
  <div id="toolbar">
    <button onclick="getData()">获取数据</button> 
  </div>
    <div class="table-demo">
        <table id="table"  ></table>
    </div>
    <script>
        //设置需要显示的列
        var columns = [
           { 
           field:"Id",  
          title: 'ID'
        }, {
            field: 'Car',
            title: '品牌'
        }, {
            field: 'StockNum',
            title: 'Num'
        } ];


        //需要显示的数据
        var data = [{
            Id: 1000,
            Car: '本田',
            StockNum: '1'
        }, {
            Id: 1002,
            Car: '丰田',
            StockNum: '2'
        }, {
            Id: 1003,
            Car: '宝马',
            StockNum: '3'
        }, {
            Id: 1004,
            Car: '别克',
            StockNum: '4'
        }];
        //bootstrap table初始化数据
        $('#table').bootstrapTable({  
            toolbar:"#toolbar", 
            columns: columns, 
            data: data,
            pageSize:2,
            pagination:true
        });
      
     function getData()
      {
     var data= $('#table').bootstrapTable('getData',{useCurrentPage:true,includeHiddenRows:true});
       alert(JSON.stringify(data));
      }
       
          
    </script>
</body>
</html>