html表格怎么尾部追加,bootstrap table append追加数据到表格末尾方法

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

完整例子

bootstrap table append在线例子

.table-demo {

width: 80%;

margin: 30px auto 0px auto;

}

.titles {

float: right;

clear: both;

}

append追加数据到最后

//设置需要显示的列

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

}