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

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);

完整例子

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: 2003,

Car: '思域',

} ];

$('#table').bootstrapTable('load', newData);

}