Как заполнить JQuery datatable с использованием опции AJAX

Question

Пожалуйста, кто-нибудь может сообщить, как я использую опцию AJAX на JQuery datatable. Я в настоящее время с помощью 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 на DataTable.

Данные, передаются в таблице:

[{"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"}]

но DataTable 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 
           } 
      ] 
     });