CODEWITHSUNDEEP
jquerydatatables
ilhan
ilhan

Reputation: 8935

jQuery DataTable is not showing the data

My jQuery DataTable does not list the JSON data. Why is that?

The HTML code:

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

The JSON data, it has application/json content-type.

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

All the files are loading properly. And no JavaScript error.

Upvotes: 1

Views: 5127

Answers (2)

ilhan
ilhan

Reputation: 8935

I have changed sAjaxSource source to a relative path and it worked. "sAjaxSource" : "../index.php/getbuildings".

Upvotes: 0

Nix
Nix

Reputation: 58522

Your issue is you are not requesting with the sEcho query parameter, and you are telling datatables to validate that the parameter matches.. test it out, if the parameter doesn't match it will just sit in "processing."

e.g: /HCAWebApp/index.php/getbuildings&sEcho=0 because you passed "sEcho":0 in the init.

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

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

Upvotes: 1

Related Questions