CODEWITHSUNDEEP
phpjsondatatables
arnold_p
arnold_p

Reputation: 505

Put JSON Data on JQuery DataTables

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

<table id="kategoriTable" class="display" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>Kode Kategori</th>
                <th>Nama</th>
                <th>Definisi</th>
                <th>Unsur Abstrak</th>
                <th>Alias</th>
                <th>Sumber Definisi</th>
                <th>Tanggal</th>
                <th>Tipe Tanggal</th>
                <th>Edisi</th>
                <th>Role</th>
                <th>Other Citation Detail</th>
                <th>Katalog</th>
                <th>Organisasi</th>
            </tr>
        </thead>
    </table>

I have tried this javascript:

<script type="text/javascript">
        $('#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"}
 ]
  });
    </script>

This is my JSON Data Structure

{"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, ]}

Last, this is the controller:

public function index()
{
    $get_url_service = $this->url_service->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->load->view('test', $data);
}

It shows error, cannot parse the data. Here is the screenshot I take: This is the error in the browser

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

Upvotes: 1

Views: 187

Answers (1)

davidkonrad
davidkonrad

Reputation: 85518

public function index()
{
    $get_url_service = $this->url_service->GetUrl('KategoriRetrieve');
    $get_json = file_get_contents($get_url_service);
    echo $get_json;
    //what are the below lines good for??
    //$data['get_data'] = new RecursiveIteratorIterator(new RecursiveArrayIterator(json_decode($get_json, TRUE)), RecursiveIteratorIterator::SELF_FIRST);
    //$this->load->view('test', $data);
}

You have it a little bit backwards. You must instruct dataTables to use items from the Kategoris array, this is done through ajax.dataSrc. And columns should specify which data-property in each item from the array that corresponds to which column :

$('#kategoriTable').dataTable({
   ajax: {
        url : "<?php echo base_url().'json/reply/KategoriRetrieve' ?>",
        dataSrc : function(json) {
           console.log(json);
           return json.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"}
   ]
});

Upvotes: 2

Related Questions