title: How to populate a JQuery datatable using AJAX option
body: <p>Please can somebody advise how I use the AJAX option on a JQuery datatable. I am currently using AJAX to retrieve data and then passing this as a data variable to be used when setting up the table:</p>
  
  <pre><code>$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": "&lt;button type = 'button' class='btn btn-xs btn-primary'&gt;Select&lt;/button&gt;"
                          },
                          {
                              "targets": [ 1 ],
                              "visible": false,
                              "searchable": false
                          }
                      ]
  });
  </code></pre>
  
  <p>This works fine but I want to make use of the AJAX reload option on the datatable.</p>
  
  <p>The data being passed to the table is:</p>
  
  <blockquote>
    <p>[{"content_id":"47","employer":"ADAS"}]</p>
  </blockquote>
  
  <p>I've tried the documentation <a href="https://datatables.net/manual/ajax" rel="nofollow noreferrer">AJAX option</a>  and am calling the following function:</p>
  
  <pre><code>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": "&lt;button type = 'button' class='btn btn-xs btn-primary'&gt;Select&lt;/button&gt;"
                          },
                          {
                              "targets": [ 1 ],
                              "visible": false,
                              "searchable": false
                          }
                      ]
  });
  </code></pre>
  
  <p>}   </p>
  
  <p>I can see from the console that I'm retrieving the same data:</p>
  
  <blockquote>
    <p>[{"content_id":"47","employer":"ADAS"}]</p>
  </blockquote>
  
  <p>but the datatable iteself just says "Loading..." and in the console I get an error:</p>
  
  <blockquote>
    <p>TypeError: f is undefined</p>
  </blockquote>
  
  <p>can anyone please help? Many thanks.</p>
  
  <p>Bindrid, thank you for your help and apologies for the delay in responding. In the end I used the following code:</p>
  
  <pre><code>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": "&lt;button type = 'button' class='btn btn-xs btn-warning'&gt;Edit&lt;/button&gt;"
                              },
                              {
                                  "targets": [4],
                                  "orderable": false,
                                  "data": null,
                                  "defaultContent": "&lt;button type = 'button' class='btn btn-xs btn-danger'&gt;Delete&lt;/button&gt;"
                              },
                              {
                                  "targets": [ 1 ],
                                  "visible": false,
                                  "searchable": false
                              }
                          ]
      });
  
  }
  </code></pre>