title: Put JSON Data on JQuery DataTables
body: <p>I want to ask how to put JSON Data on JQuery DataTables? I cannot load my JSON data when I want to load it. I am using CodeIgniter.
  Here is my code on my view</p>
  
  <pre><code>&lt;table id="kategoriTable" class="display" width="100%" cellspacing="0"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Kode Kategori&lt;/th&gt;
                  &lt;th&gt;Nama&lt;/th&gt;
                  &lt;th&gt;Definisi&lt;/th&gt;
                  &lt;th&gt;Unsur Abstrak&lt;/th&gt;
                  &lt;th&gt;Alias&lt;/th&gt;
                  &lt;th&gt;Sumber Definisi&lt;/th&gt;
                  &lt;th&gt;Tanggal&lt;/th&gt;
                  &lt;th&gt;Tipe Tanggal&lt;/th&gt;
                  &lt;th&gt;Edisi&lt;/th&gt;
                  &lt;th&gt;Role&lt;/th&gt;
                  &lt;th&gt;Other Citation Detail&lt;/th&gt;
                  &lt;th&gt;Katalog&lt;/th&gt;
                  &lt;th&gt;Organisasi&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>I have tried this javascript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          $('#kategoriTable').dataTable({
      ajax: {
      url : "http://localhost:90/kugi_deployment/api/json/reply/KategoriRetrieve",
      dataSrc : function(json) {
         console.log(json);
         return json.Kategoris
      }
     },
     //data : testData.Kategoris,
     columns: [
    { data: "KodeKategori"},
    { data: "Nama"},
    { data: "Definisi"},
    { data: "UnsurAbstrak"},
    { data: "Alias"},
    { data: "SumberDefinisi"},
    { data: "Tanggal"},
    { data: "TipeTanggal"},
    { data: "Edisi"},
    { data: "Role"},
    { data: "OtherCitationDetail"},
    { data: "NamaKatalog"},
    { data: "NamaOrganisasi"}
   ]
    });
      &lt;/script&gt;
  </code></pre>
  
  <p>This is my JSON Data Structure</p>
  
  <pre><code>{"State":0,"Message":"","Kategoris":[{"KodeKategori":"A","Nama":"REFERENSI SPASIAL","Definisi":"","UnsurAbstrak":true,"Alias":"","SumberDefinisi":"","Tanggal":"\/Date(-62135596800000-0000)\/","TipeTanggal":"","Edisi":"","Role":"","OtherCitationDetail":"","NamaKatalog":"Katalog Unsur Geografis","NamaOrganisasi":"Badan Informasi Geospasial"}, ....and so on, ]}
  </code></pre>
  
  <p>Last, this is the controller:</p>
  
  <pre><code>public function index()
  {
      $get_url_service = $this-&gt;url_service-&gt;GetUrl('KategoriRetrieve');
      $get_json = file_get_contents($get_url_service);
      $data['get_data'] = new RecursiveIteratorIterator(new RecursiveArrayIterator(json_decode($get_json, TRUE)), RecursiveIteratorIterator::SELF_FIRST);
      $this-&gt;load-&gt;view('test', $data);
  }
  </code></pre>
  
  <p>It shows error, cannot parse the data. Here is the screenshot I take:
  <a href="https://i.stack.imgur.com/ddZca.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ddZca.png" alt="This is the error in the browser"></a></p>
  
  <p>When I try to load from that url it returns 'Loading' forever. Am I do something wrong with it? I really confuse to fix this. Hope anyone can help me to fix this. Thanks</p>