2013-02-01 91 views
1

我的jQuery DataTable沒有列出JSON數據。這是爲什麼?jQuery DataTable未顯示數據

的HTML代碼:

<!doctype html> 
<html lang="tr"> 
<head> 
    <meta charset="utf-8"> 
    <title>Binalar</title> 
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"> 
     <style type="text/css" title="currentStyle"> 
      @import "http://127.0.0.1/HCAWebApp/DataTables-1.9.4/media/css/demo_page.css"; 
      @import "http://127.0.0.1/HCAWebApp/DataTables-1.9.4/media/css/demo_table.css"; 
     </style> 
    <script src="http://127.0.0.1/HCAWebApp/DataTables-1.9.4/media/js/jquery.js"></script> 
    <script type="text/javascript" language="javascript" src="http://127.0.0.1/HCAWebApp/DataTables-1.9.4/media/js/jquery.dataTables.js"></script> 

    <script type="text/javascript" charset="utf-8"> 
    $(document).ready(function() { 
     $('#binalar').dataTable({ 
      "bProcessing" : true, 
      "bServerSide" : true, 
      "sAjaxSource" : "http://127.0.0.1/HCAWebApp/index.php/getbuildings" 
     }); 
    }); 
</script> 

    <style> 
     body { padding: 15px 30px; } 
     .alignleft { float: left; vertical-align:text-bottom; } 
     .alignright { float: right; vertical-align:text-bottom; } 
     td { width: 25% } 
    </style> 
</head> 
<body> 
        <div class="navbar"> 
       <div class="navbar-inner"> 
       <div class="container"> 
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        </a> 
        <div class="nav-collapse collapse navbar-responsive-collapse"> 
        <ul class="nav"> 
        <li class='active'><a href="binalar">Binalar</a></li> 
        <li ><a href="cihazlar">Cihazlar</a></li> 
        <li ><a href="kullanicilar">Kullanıcılar</a></li> 
        <li ><a href="gruplar">Gruplar</a></li> 

        </ul> 
        <ul class="nav pull-right"> 
         <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">İlhan ŞUBAŞI <b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Veritronik</a></li> 
          <li><a href="#">Seller</a></li> 
          <li class="divider"></li> 
          <li><a href="kullanicilar/logout">Çıkış</a></li> 
         </ul> 
         </li> 
        </ul> 
        </div><!-- /.nav-collapse --> 
       </div> 
       </div><!-- /navbar-inner --> 
      </div><!-- /navbar --><div class='fdfg'> 
    <div id="baslik"> 
     <h1 style="margin-bottom:-15px" class="alignleft">Binalar</h1> 
     <h3 style="margin-bottom:-15px" class="alignright">+ Bina Ekleme</h3> </div> 
    <div style="clear: both;"></div> 
    <hr> 

    <table cellpadding="0" cellspacing="0" border="0" class="display" id="binalar"> 
     <thead> 
      <tr> 
       <th>Column 1</th> 
       <th>Column 2</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td colspan="2" class="dataTables_empty">Veriler sunucudan yükleniyor.</td> 
      </tr> 
     </tbody> 
    </table> 

</div> 

</body> 
</html> 

JSON數據,它具有application/json內容類型。

{ "aaData" : [ [ "Ersin SEewrZA", 
     "[email protected]" 
     ], 
     [ "İlhan ŞUBewrAŞI", 
     "[email protected]" 
     ] 
    ], 
    "iTotalDisplayRecords" : 2, 
    "iTotalRecords" : 2, 
    "sColumns" : "FullName,Email", 
    "sEcho" : 0 
} 

所有文件加載正常。並沒有JavaScript錯誤。

回答

0

我已經改變sAjaxSource源的相對路徑和它的工作。 "sAjaxSource" : "../index.php/getbuildings"

1

您的問題是您沒有使用sEcho查詢參數請求,並且您正在告訴數據表以驗證參數是否匹配。如果參數不匹配,那麼測試它將只處理「處理」。

例如:/HCAWebApp/index.php/getbuildings&sEcho=0因爲您在init中通過了"sEcho":0

$('#binalar').dataTable({ 
    "bProcessing" : true, 
    "bServerSide" : true, 
    "sAjaxSource" : "/getbuildings.json?sEcho=0" , 
    "sEcho": 0 
    }); 

的jsfiddle:http://jsfiddle.net/ncapito/VbZhW/4/