bootstrap如何获取table数据

本篇内容主要讲解“bootstrap如何获取table数据”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“bootstrap如何获取table数据”吧!

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名注册虚拟主机、营销软件、网站建设、崖州网站维护、网站推广。

bootstrap获取table数据的方法:1、通过表格参数url来获取;2、通过“$.get()”方式来操作,并用表格参数的data来自定义方法去接收数据的格式即可。

bootstrap如何获取table数据

本文操作环境:Windows7系统、bootsrap3.3.7版、DELL G3电脑

bootstrap怎么获取table数据?

bootstrap table 获取数据的两种方式

获取数据一般常用的有两种,一种是通过table的表格参数url来获取json数据,另外一种是通过$.get()的方式来获取,两个实现的效果都是一样的,只是在接收数据的时候略有不同。下面分别来介绍一下两都的使用区别

一、 通过表格参数url来获取,这里的url就是后台接口的地址,最终所返回的数据会直接渲染到table中。不过这里有个需要注意的地方,就是接口所返回的json格式,必须和table中定义的一致,按下面的示例来说,json所返回的数据格式如下。

{
    "id": 1,
    "name": "张三",
    "price" : "100"
}

代码片段如下:


$ ( '#table' ). bootstrapTable ({
url :  'data1.json' ,
columns :  [{
field :  'id' ,
title :  'Item ID'
},  {
field :  'name' ,
title :  'Item Name'
},  {
field :  'price' ,
title :  'Item Price'
} ]
});

但如果返回的json格式是下面这个样子的话,那就不能直接渲染table,得需要借助列参数中的formatter来自定义方法实现。

那像下面这个json来说,需要对分别对id, name, price来实现自定义方法。对于前后端完全分离的开发模式下,用这种方法来操作数据显然不是最优的。

{
    "errcode": "OK",
    "data_list": [
                   {
                        "id": 1,
                                    "name": "张三",
                                    "price" : "100"
                    }
               ]
}

二、 通过$.get()方式来操作,那就可以更加灵活地去操作后台所返回的数据了,在这里我们用表格参数的data来自定义方法去接收数据的格式

代码片段


$.get('/data/', function(data){
$ ( '#table' ). bootstrapTable ({
columns :  [{
field :  'id' ,
title :  'Item ID'
},  {
field :  'name' ,
title :  'Item Name'
},  {
field :  'price' ,
title :  'Item Price'
} ]
data: formatData(data)
});
})
// 格式化数据
var formatData = function (data) {
var l = [] ;
for ( var i = 0 ; i < data.data_list.length ; i++) {
           var m = data.data_list[i]
var d = {
'id': m. id ,
'name': m. name ,
'price': m. price ,
}
l. push(d)
}
return l
} ;

到此,相信大家对“bootstrap如何获取table数据”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


新闻标题:bootstrap如何获取table数据
文章路径:http://scyanting.com/article/jihjco.html