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のreloadオプションを利用したいです。

テーブルに渡されるデータは次のとおりです。

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