How to get table data in bootstrap

How bootstrap obtains table data: 1. Obtain it through the table parameter url; 2. Operate through the "$.get()" method, and use the data of the table parameter to customize the method to receive the data format. Can.

The operating environment of this article: Windows 7 system, bootsrap version 3.3.7, DELL G3 computer

How to obtain table data with bootstrap ?

bootstrap table two ways to obtain data

There are two commonly used ways to obtain data, one is to obtain it through the table parameter url json data, the other is to obtain it through $.get(). The effects of the two implementations are the same, but they are slightly different when receiving data. Let's introduce the differences between the two respectively

1. Obtain it through the table parameter url. The url here is the address of the backend interface. The final returned data will be directly rendered into the table. However, there is something to note here, that is, the json format returned by the interface must be consistent with that defined in the table. According to the following example, the data format returned by json is as follows.

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

The code snippet is as follows:

<table  id= "table" ></table>
$ ( &#39;#table&#39; ). bootstrapTable ({
url :  &#39;data1.json&#39; ,
columns :  [{
field :  &#39;id&#39; ,
title :  &#39;Item ID&#39;
},  {
field :  &#39;name&#39; ,
title :  &#39;Item Name&#39;
},  {
field :  &#39;price&#39; ,
title :  &#39;Item Price&#39;
} ]
});

But if the returned json format is as follows, the table cannot be rendered directly, and the formatter in the column parameter must be used to customize the method.

For the json below, you need to implement custom methods for id, name, and price respectively. For a development model where the front and back ends are completely separated, using this method to manipulate data is obviously not optimal.

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

2. By operating in the $.get() method, you can more flexibly operate the data returned by the background. Here we use the data of the table parameter to customize the method to receive the data format.

Code snippet

<table  id= "table" ></table>
$.get(&#39;/data/&#39;, function(data){
$ ( &#39;#table&#39; ). bootstrapTable ({
columns :  [{
field :  &#39;id&#39; ,
title :  &#39;Item ID&#39;
},  {
field :  &#39;name&#39; ,
title :  &#39;Item Name&#39;
},  {
field :  &#39;price&#39; ,
title :  &#39;Item Price&#39;
} ]
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 = {
&#39;id&#39;: m. id ,
&#39;name&#39;: m. name ,
&#39;price&#39;: m. price ,
}
l. push(d)
}
return l
} ;

Recommended study: "bootstrap usage tutorial"

The above is the detailed content of How to get table data in bootstrap. For more information, please follow other related articles on the PHP Chinese website!