擷取資料一般常用的有兩種，一種是通過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 } ;
