bootstrap怎麼取得table數據-Bootstrap教程-PHP中文網

bootstrap怎麼取得table數據

藏色散人

發布： 2021-11-04 16:19:59

原創

8390 人瀏覽過

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

登入後複製

但如果傳回的json格式是下面這個樣子的話,那就不能直接渲染table，得需要藉助列參數中的formatter來自訂方法實作。

那像下面這個json來說，需要對分別對id, name, price來實作自訂方法。對於前後端完全分離的開發模式下，用這種方法來操作資料顯然不是最優的。

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

登入後複製

二、透過$.get()方式來操作，那就可以更有彈性地去操作後台所傳回的資料了，在這裡我們用表格參數的data來自訂方法去接收資料的格式

程式碼片段

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

登入後複製

推薦學習：《bootstrap使用教學》

以上是bootstrap怎麼取得table數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！