bootstrap table append追加数据到表格末尾方法

bootstrap table append把数据追加到表格末尾的方法，比如表格的原始数据是data数组，append方法相当于往data数组末尾追加数据。

append方法

参数名称	参数说明
data	格式[{id:1,name:"x1"},{id:2,name:"x2"}]

代码例子

//第1步，定义要显示的列
var columns = [
  { 
      field:"Id",  
      title: 'ID'
  }, {
     field: 'Car',
     title: '品牌'
} ];
//第2步，初始化bootstrap table
    var data= [{
            Id: 10,
            Car: 'C5', 
        }, {
            Id: 20,
            Car: 'C6', 
        }, {
            Id: 30,
            Car: 'C7', 
    } ];
        
 $('#table').bootstrapTable({  
       toolbar:"#toolbar", 
       columns: columns,  
       data:data
 });
 //第3部，使用load方法
 //newData你从服务器上返回的新数据
  var newData = [{
            Id: 3000,
            Car: 'CAR001', 
        }, {
            Id: 3002,
            Car: 'CAR001', 
        }, {
            Id: 3003,
            Car: 'CAR001', 
   } ];
        
$('#table').bootstrapTable('append', newData);

在线试一试

完整例子

<!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/jquery-3.3.1/jquery.js"></script>
    <link href="https://www.itxst.com/package/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet" />
    <link href="https://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.css" rel="stylesheet" />
    <script src="https://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.js"></script> 
    <title>bootstrap table append在线例子</title>
    <style>
        .table-demo {
            width: 80%;
            margin: 30px auto 0px auto;
        }
      .titles {
  float: right;
  clear: both;
}
    </style>
</head>
<body>
  <div id="toolbar">
    <button onclick="loadData()">append追加数据到最后</button> 
  </div>
    <div class="table-demo">
        <table id="table"  ></table>
    </div>
    <script>
        //设置需要显示的列
        var columns = [
           { 
           field:"Id",  
          title: 'ID'
        }, {
            field: 'Car',
            title: '品牌'
        } ];
      var data= [{
            Id: 10,
            Car: 'C5', 
        }, {
            Id: 20,
            Car: 'C6', 
        }, {
            Id: 30,
            Car: 'C7', 
    } ];
        
  //bootstrap table初始化数据
   $('#table').bootstrapTable({  
            toolbar:"#toolbar",  
            data:data,
            columns: columns, 
            pageSize:2,
            pagination:true
    });
      
  function loadData()
  {
       //newData需要追加的新数据
       var newData = [{
            Id: 3000,
            Car: 'CAR001', 
        }, {
            Id: 3002,
            Car: 'CAR001', 
        }, {
            Id: 3003,
            Car: 'CAR001', 
         } ];
        
       $('#table').bootstrapTable('append', newData);
   }
    
    </script>
</body>
</html>