bootstrap取得table資料的方法:1、透過表格參數url來取得;2、透過「$.get()」方式來操作,並用表格參數的data來自訂方法去接收資料的格式即可。
本文操作環境: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> $ ( '#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來自訂方法去接收資料的格式
程式碼片段
<table id= "table" ></table> $.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使用教學》
以上是bootstrap怎麼取得table數據的詳細內容。更多資訊請關注PHP中文網其他相關文章!