bootstrap table load加载数据到表格的方法

bootstrap table本身自带了一套加载服务器端数据的机制，你无需自己用jquery的ajax方法去加载服务器端的数据，但是如果你仍然习惯jquery的ajax方法加载数据或你有自己的特殊需求，你可以用bootstrap table load方法来填充数据到表格。load方法会把旧的数据覆盖。如果你想用bootstrap table自带机制，请点击bootstrap table 服务器端分页

load方法

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

代码例子

注意：在使用laod加载数据之前不要忘记初始化bootstrap table,比如显示哪些列之类的。

//第1步，定义要显示的列
var columns = [
  { 
      field:"Id",  
      title: 'ID'
  }, {
     field: 'Car',
     title: '品牌'
} ];
//第2步，初始化bootstrap table
 $('#table').bootstrapTable({  
       toolbar:"#toolbar", 
       columns: columns,  
 });
 //第3部，使用load方法
 //newData你从服务器上返回的新数据
       var newData = [{
            Id: 2000,
            Car: '雅阁', 
        }, {
            Id: 2002,
            Car: '帕萨特', 
        }, {
            Id: 2003,
            Car: '思域', 
   } ];
        
$('#table').bootstrapTable('load', 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 load在线例子</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()">load加载新数据</button> 
  </div>
    <div class="table-demo">
        <table id="table"  ></table>
    </div>
    <script>
        //设置需要显示的列
        var columns = [
           { 
           field:"Id",  
          title: 'ID'
        }, {
            field: 'Car',
            title: '品牌'
        } ];
    var data= [{
            Id: 1,
            Car: 'C1', 
        }, {
            Id: 2,
            Car: 'C2', 
        }, {
            Id: 3,
            Car: 'C3', 
        } ];
        
        //bootstrap table初始化数据
        $('#table').bootstrapTable({  
            toolbar:"#toolbar",  
            data:data,
            columns: columns,  
        });
      
     function loadData()
      {
      //newData你从服务器上返回的新数据
       var newData = [{
            Id: 2000,
            Car: '雅阁', 
        }, {
            Id: 2002,
            Car: '帕萨特', 
        }, {
            Id: 2003,
            Car: '思域', 
        } ];
        
       $('#table').bootstrapTable('load', newData);
      }
       
          
    </script>
</body>
</html>