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: ,
Car: '思域',
} ];
$('#table').bootstrapTable('load', newData);
完整例子
bootstrap table load在线例子
.table-demo {
width: 80%;
margin: 30px auto 0px auto;
}
.titles {
float: right;
clear: both;
}
load加载新数据
//设置需要显示的列
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: ,
Car: '思域',
} ];
$('#table').bootstrapTable('load', newData);
}
