2017-01-28 72 views
0

我正在使用JQuery DataTables來顯示錶格數據。jQuery DataTables Ajax GET json格式化

我使用下面的代碼爲GET Ajax請求:

$(document).ready(function() { 
    var table = $('#data_table').DataTable({ 
    ajax: { 
     type: 'GET', 
     url: url_path, 
     data: {'data_id':data_id}, 
     success: function(data) { 
      #here is where I am not sure how to populate the table with the data 
      for (var i = 0; i < data.length; i++) { 
       $.each(data[i], function(name, value) { 
        console.log(name + ": " + value); 
       }); 
      } 
     } 
    } 
}); 

例如控制檯輸出:

>>obj1_property1: value1 #to go in table row 1 column 1 
>>obj1_property2: value2 #to go in table row 1 column 2 
>>obj2_property1: value1 #to go in table row 2 column 1 
>>obj3_property2: value2 #to go in table row 2 column 2 

從Ajax請求我得到對象的數組,我可以得到他們的名字以及成功函數中代碼的值屬性。但我無法弄清楚如何用這些數據填充DataTable。

我在這裏找到的例子:https://datatables.net/examples/ajax/objects.html顯示使用方法:

"ajax": "data/objects.txt", 
    "columns": [ 
     { "data": "name" }, 

但我不能工作如何這個裁縫我已經提供了具體的例子 - 在哪裏以及如何將我指定「列'在我的例子中返回一個對象數組?

+0

您是否返回了格式爲{「data」的json:[...您的對象在這裏...]}從您的示例輸出中看起來並不是這樣。 – backpackcoder

+0

@backpackcoder上面的代碼輸出的形式是proprty1:value1,如果我用下面的代碼替換成功函數中的代碼:console.log(data)我得到[Object,Object,Object]這些對象中的每一個都應該代表一行。謝謝 –

回答

1

您需要將columns選項和data option添加到您的Datatables初始化選項中。您還需要返回包含在「數據」字段中的數據數組的單個對象JSON(請參見下文)。還要從ajax選項中刪除success選項,因爲這要求您明確撥打電話來繪製表格。如果您需要從請求中發佈過程數據,則會使用它。這小提琴應該有幫助https://jsfiddle.net/backpackcoder/fv95dzxs/。因爲我使用post來調用/echo/json,所以我的ajax數據對象將返回的JSON放入data參數中,而不是您的id。

你會希望你返回的數據具有這種格式。

{ 
    "data": [{ 
     "col1": "data1", 
     "col2": "data2", 
     "col3": "data3", 
    }, { 
     "col1": "data4", 
     "col2": "data5", 
     "col3": "data6", 
    }] 
    }