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 그냥 "로드 중 ..."콘솔에서 말하는 데이터 테이블은 I 오류 얻을 :

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