title: Populate JQuery DataTables from PHP Json Object
body: <p>i'm trying to populate my table (<a href="https://datatables.net" rel="nofollow">DataTables.net</a>) using ajax. The received values are from an json object generated by my php script. For the moment i can manage it by using classic method, vars from php but i want to switch to json method now.</p>
  
  <p>Here is my <a href="https://jsfiddle.net/qfL8x7sf/" rel="nofollow">jsfiddle</a> where i have tested many things without any success :\</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $('#example').DataTable({
      "bProcessing": true,
        "ajax": {
          "url": "http://www.json-generator.com/api/json/get/bUCyQgmGeW?indent=2",
          "dataSrc": "syncok"
        },
        "columns": [
          { "data": "Ticket_RT" },
          { "data": "Last_up_time" },
          { "data": "Last_down_time" },
          { "data": "Date_du_Diag" },
          { "data": "Commentaire_FT" },
          { "data": "Code_Retour_FT" },
          { "data": "Supprimer" }
        ]
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-family: "Open Sans", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-1.12.3.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  
  
  &lt;div id="exampleDiv"&gt;hello&lt;/div&gt;
  &lt;table width="100%" class="display" id="example"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Ticket RT&lt;/th&gt;
        &lt;th&gt;Last up time&lt;/th&gt;
        &lt;th&gt;Date du Diag RT&lt;/th&gt;
        &lt;th&gt;Commentaire FT&lt;/th&gt;
        &lt;th&gt;Code Retour FT&lt;/th&gt;
        &lt;th&gt;Supprimer&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I hope someone can help me with this problem, i have tried many snippet from stackoverflow and from the original documentation but i can't manage it by myself !</p>
  
  <p>Thank you in advance for your help :)</p>
  
  <p>Regards.</p>
  
  <p><strong>EDIT :</strong></p>
  
  <p>To fix this issue you must add this before .DataTable function :
  <code>$("#example").empty();</code> </p>
  
  <p>And add an option <code>"bDestroy": true,</code> to .DataTable function.</p>
  
  <p>Solution from this thread : <a href="https://datatables.net/forums/discussion/21616/typeerror-headercells-i-is-undefined-when-re-creating-table" rel="nofollow">DataTables Forum</a></p>
  
  <p><strong>EDIT 2 :</strong></p>
  
  <p>Excuse me i'm blind ! Now my title disappear after adding .empty() function...
  Now i'm trying to fix this another problem, so if someone can put me in the right way ! Thank you in advance for the help :)</p>
  
  <p><strong>FIX :</strong></p>
  
  <pre><code>$(document).ready(function() {
  $("#ret_syncok").empty();
  $('#ret_syncok').DataTable( {
      "bDestroy": true,
      "bProcessing": true,
      "ajax": {
          "url": "js/optionsTables/cMass_ret_syncok.php",
          "dataSrc": "syncok"
      },
      "columns": [
          { "data": "Ticket_RT" },
          { "data": "Last_up_time" },
          { "data": "Last_down_time" },
          { "data": "Date_du_Diag_RT" },
          { "data": "Commentaire_FT" },
          { "data": "Code_Retour_FT" },
          { "data": "Supprimer" }
      ],
      "columnDefs": [
          { "title": "Ticket RT", "targets": 0 },
          { "title": "Last up time", "targets": 1 },
          { "title": "Last down time", "targets": 2 },
          { "title": "Date du Diag_RT", "targets": 3 },
          { "title": "Commentaire FT", "targets": 4 },
          { "title": "Code Retour FT", "targets": 5 },
          { "title": "Supprimer", "targets": 6 }
      ]
  });
  });
  </code></pre>
  
  <p>I hope that can help someone else :)</p>