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

}

html5表格数据加载,bootstrap table load加载数据到表格的方法相关推荐

bootstraptable 汇总_JS组件系列——表格组件神器：bootstrap table
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
JS组件系列——表格组件神器：bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
bootstrapr表格父子框_JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）...
前言:上篇 JS组件系列--表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
【JS组件系列】——表格组件神器：bootstrap table（二：父子表和行列调序）
前言:上篇 JS组件系列--表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
解决bootstrap table刷新加载时白色闪屏问题
根据项目需要,把bootstrap table都改成了蓝色的风格,但是今天测试的时候发现了一个小的问题.每次刷新加载的数据的时候,总是会有一闪而过的白屏.很影响交互效果,这个时候,需要找到bootst ...
bootstrap 黑边框表格样式_设置Bootstrap Table表格样式并隔行变色
设置Bootstrap Table表格样式并隔行变色设置bootstrap-table表格样式可以通过设置classess属性进行设置,官方默认支持黑色主题.隔行变色等样式,你也可以自定义样式把你的 ...
关于Bootstrap Table使用生成冻结窗格的表格
参考资料 : <JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案> <http://issues.wenzhixin.net.cn/bootst ...
html表格右键可编辑,Bootstrap table右键功能实现方法
最近遇到有一个需求,需要在Bootstrap table上使用右键.网上搜了半天没有找到,最后发现Bootstrap table不支持右键(官方文档给出的答案 https://github.com/w ...
$.ajax modal,使用bootstrap modal.load()加载的js，第二次modal显示的时候，js不生效？...
我想要动态加载modal内的内容(一个模版,里面包含加载js文件), 我使用load(),在modal显示的时候进行ajax加载,js如下: $('#modal').on('show.bs.modal ...
bootstrap table 主子表局部数据刷新（刷新子表）
1.主表中设置data-detail-view="true",启用主子表模式: <table class="table table-striped" wi ...

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

html5表格数据加载,bootstrap table load加载数据到表格的方法相关推荐

最新文章

热门文章