如何使用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 
           } 
      ] 
     });