bootstrap table prepend追加数据到表格头部方法

bootstrap table prepend把数据追加到表格头部的方法，这个方法刚好和append方法相反。

prepend方法

参数名称	参数说明
data	格式[{id:2,name:"Y1"},{id:21,name:"Y2"}]

代码例子

//第1步，定义要显示的列
var columns = [
  { 
      field:"Id",  
      title: 'ID'
  }, {
     field: 'Car',
     title: '品牌'
} ];
//第2步，初始化bootstrap table
    var data= [{
            Id: 600,
            Car: 'Car-X1', 
        }, {
            Id: 601,
            Car: 'Car-X2', 
        }, {
            Id: 30,
            Car: 'Car-X3', 
    } ];
        
 $('#table').bootstrapTable({  
       toolbar:"#toolbar", 
       columns: columns,  
       data:data
 });
 //第3部，使用load方法
 //newData你从服务器上返回的新数据
  var newData = [{
            Id: 7000,
            Car: 'CAR005', 
        }, {
            Id: 7002,
            Car: 'CAR006', 
        }, {
            Id: 7003,
            Car: 'CAR007', 
   } ];
        
$('#table').bootstrapTable('prepend', 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 prepend在线例子</title>
    <style>
        .table-demo {
            width: 80%;
            margin: 30px auto 0px auto;
        }
      .titles {
  float: right;
  clear: both;
}
    </style>
</head>
<body>
  <div id="toolbar">
    <button onclick="doprepend()">prepend追加数据到前面</button> 
  </div>
    <div class="table-demo">
        <table id="table"  ></table>
    </div>
    <script>
        //设置需要显示的列
        var columns = [
           { 
           field:"Id",  
          title: 'ID'
        }, {
            field: 'Car',
            title: '品牌'
        } ];
      var data= [{
            Id: 600,
            Car: 'Car-X1', 
        }, {
            Id: 601,
            Car: 'Car-X2', 
        }, {
            Id: 30,
            Car: 'Car-X3', 
    } ];
        
        
  //bootstrap table初始化数据
   $('#table').bootstrapTable({  
            toolbar:"#toolbar",  
            data:data,
            columns: columns, 
            pageSize:2,
            pagination:true
    });
      
  function doprepend()
  {
       //newData需要追加的新数据
       var newData = [{
            Id: 7000,
            Car: 'CAR005', 
        }, {
            Id: 7002,
            Car: 'CAR006', 
        }, {
            Id: 7003,
            Car: 'CAR007', 
       } ];
        
       $('#table').bootstrapTable('prepend', newData);
   }
    
    </script>
</body>
</html>