如何使用AJAX選項填充JQuery數據表

Question

請有人建議我如何在JQuery數據表上使用AJAX選項。我目前正在使用AJAX來獲取數據，然後通過這一個數據變量設定完表格時使用：

$table = $('#cat_content_datatable').DataTable ({ 
    select: { 
     style: 'single' 
    }, 
    data:data, 
    "bFilter": false, // remove search filter 
    "order": [], 
    responsive: true, 
    columns: [ 
        { 'data': null }, 
        { 'data': 'content_id' }, 
        { 'data': 'employer' } 
       ], 
    "columnDefs": [ 
         { 
          "targets": -3, 
          "orderable": false, 
          "data": null, 
          "defaultContent": "<button type = 'button' class='btn btn-xs btn-primary'>Select</button>" 
         }, 
         { 
          "targets": [ 1 ], 
          "visible": false, 
          "searchable": false 
         } 
        ] 
}); 

這工作得很好，但我想利用在數據表中的AJAX重新加載選項。傳遞表

的數據是：

[{"content_id":"47","employer":"ADAS"}]

我試過的文檔AJAX option和我打電話以下功能：

function populateCatEmpDT (catDesc, catID, action) { 

$table = $('#cat_content_datatable').DataTable ({ 
    select: { 
     style: 'single' 
    }, 
    ajax: { 
     url: '../workflow_ajax/fields/ajax.php', 
     method: 'GET', 
     data: {catDesc: catDesc, catID:catID, emp:'BT', action: action}, 
     dataType: 'json', 
     type: 'POST' 
    }, 
    "bFilter": false, // remove search filter 
    "order": [], 
    responsive: true, 
    columns: [ 
        { 'data': null }, 
        { 'data': 'content_id' }, 
        { 'data': 'employer' } 
       ], 
    "columnDefs": [ 
         { 
          "targets": -3, 
          "orderable": false, 
          "data": null, 
          "defaultContent": "<button type = 'button' class='btn btn-xs btn-primary'>Select</button>" 
         }, 
         { 
          "targets": [ 1 ], 
          "visible": false, 
          "searchable": false 
         } 
        ] 
}); 

}

我可以看到控制檯，我正在檢索相同的數據：

[{"content_id":"47","employer":"ADAS"}]

但iteself只是說：「載入中...」，並在控制檯中的數據表中我得到一個錯誤：

TypeError: f is undefined

任何人都可以請幫助？非常感謝。

Bindrid，謝謝你的幫助和歉意，以便延遲迴復。最後我用下面的代碼：

function populateTooltipDT(contentID) { 

    $table = $('#tooltip_datatable').DataTable ({ 
     select: { 
      style: 'single' 
     }, 
     destroy: true, 
     ajax: { 
      url: '../workflow_ajax/tooltips/ajax.php', 
      type: 'POST', 
      data: {contentID: contentID}, 
      dataType: 'json', 
      dataFilter: function(data){ 
       // DataFilter is where you can change the json data format from what your server sends to 
       // what DataTable expects. 
       // if your data is serialized at this point, deserialize it 
       var jData = JSON.parse(data); 

       // then what the DataTables expect and reserialize 
       var dtData =JSON.stringify({"data": jData}); 
       console.log(dtData); 
       return dtData; 
      } 
     }, 
     "bFilter": false, // remove search filter 
     "order": [], 
     responsive: true, 
     columns: [ 
         { 'data': null }, 
         { 'data': 'id' }, 
         { 'data': 'keyword' }, 
         { 'data': 'tip' }, 
         { 'data': null } 
        ], 
     "columnDefs": [ 
          { 
           "targets": -5, 
           "orderable": false, 
           "data": null, 
           "defaultContent": "<button type = 'button' class='btn btn-xs btn-warning'>Edit</button>" 
          }, 
          { 
           "targets": [4], 
           "orderable": false, 
           "data": null, 
           "defaultContent": "<button type = 'button' class='btn btn-xs btn-danger'>Delete</button>" 
          }, 
          { 
           "targets": [ 1 ], 
           "visible": false, 
           "searchable": false 
          } 
         ] 
    }); 

} 

Answer 1

這是我對你的東西應該看起來像什麼樣的解釋。這是一個最佳猜測，因此您可能需要進行調整。

$table = $('#cat_content_datatable').DataTable ({ 
      select: { 
       style: 'single' 
      }, 
      ajax: { 
       url: '../workflow_ajax/fields/ajax.php', 
       type: 'POST', 
       data: {catDesc: catDesc, catID:catID, emp:'BT', action: action}, 
       dataType: 'json', 
       // this tells the client that the data coming back from the server is also JSON formatted data. 
       contentType: "application/json; charset=utf-8", 
       dataFilter: function(data){ 
        // DataFilter is where you can change the json data format from what your server sends to 
        // what DataTable expects. 
        // if your data is serialized at this point, deserialize it 
        var jData = JSON.parse(data); 

        // then what the DataTables expect and reserialize 
        var dtData =JSON.stringify({"data": jData}); 
        return dtData 

       } 
      }, 
      "bFilter": false, // remove search filter 
      "order": [], 
      responsive: true, 
      columns: [ 
          { 'data': null }, 
          { 'data': 'content_id' }, 
          { 'data': 'employer' } 
      ], 
      "columnDefs": [ 
           { 
            "targets": -3, 
            "orderable": false, 
            "data": null, 
            "defaultContent": "<button type = 'button' class='btn btn-xs btn-primary'>Select</button>" 
           }, 
           { 
            "targets": [ 1 ], 
            "visible": false, 
            "searchable": false 
           } 
      ] 
     });