将JSON数据放在JQuery DataTables上

时间:2015-10-21 14:21:17

标签: php json datatables

我想问一下如何将JSON数据放在JQuery DataTables上?我想加载时无法加载我的JSON数据。我正在使用CodeIgniter。 这是我的观点上的代码

<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>

我试过这个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>

这是我的JSON数据结构

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

最后,这是控制器:

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);
}

它显示错误,无法解析数据。这是我拍摄的截图: This is the error in the browser

当我尝试从该网址加载时,它返回&#39;正在加载&#39;永远。我做错了吗?我真的很困惑解决这个问题。希望有人能帮我解决这个问题。感谢

1 个答案:

答案 0 :(得分:2)

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);
}

你有点倒退了。您必须指示dataTables使用Kategoris数组中的项目,这是通过ajax.dataSrc完成的。并且columns应该指定数组中与哪个列对应的每个项目中的data - 属性:

$('#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"}
   ]
});