JQuery datatables is not loading data to table. Any ideas?

Question

This is my first attempt at jQuery datatables.

I am trying to populate html table with data from php using jquery datatables.

The code below is stuck on Loading data from server.

Any ideas what changes I need to make to make this work?

    <link rel="stylesheet" type="text/css" href="css/header.css">
<div id="container">
<div style="width:680px">
<table id="tbDetails" cellpadding="0" cellspacing="0"  id="example">
<thead style="background-color:#DC5807; color:White; font-weight:bold;font-size:10pt;">
<tr style="border:solid 1px #000000">
    <th width="5%">ID</th>
    <th width="10%">Date</th>
    <th width="10%">Request Status</th>
    <th width="15%">Requestor FullName</th>
    <th width="15%">Requestor WorkPhone</th>
    <th width="15%">Requestor Email</th>
    <th width="15%">Primary SiteContact</th>
    <th width="15%">Secondary SiteContact</th>
  </tr>
 </thead>
<tbody>
    <tr>
        <td colspan="8" class="dataTables_empty">Loading data from server</td>
    </tr>
</tbody>

 </table>
 </div>
  <div class="spacer"></div>
 </div>
         <style type="text/css">
         @import "jquery/dataTables/media/css/jquery-ui.css";
         @import "jquery/datatables/media/css/demo_table.css";
         td{padding-right:30px;}
         .row_selected{color: gray;}
         </style>
 <script type="text/javascript">
 $(document).ready(function() {
     var what = "customer";
     /* Init DataTables */
     var oTable = $('#example).dataTable({
         "bJQueryUI" : true,
         //"bProcessing" : true,
         "bServerSide" : true,
         "sPaginationType" : "RequestID",
         "sAjaxSource" : "filltable.php",

         "aoColumns" : [{
             "sClass" : "center",
             "bSortable" : false,
         }, {
             "sName" : "RequestID",
             "mData" : "2"
         }, {
             "sName" : "RequestDate",
             "mData" : "3"
         }, {
             "sName" : "RequestStatus",
             "mData" : "4"
         }, {
             "sName" : "RequestorFullName",
             "mData" : "5"
         }, {
             "sName" : "RequestorWorkPhone",
             "mData" : "6"
         }, {
             "sName" : "RequestorEmail",
             "mData" : "7"
         }, {
             "sName" : "PrimarySiteContactDisplay",
             "mData" : "8"
         }, {
             "sName" : "SecondarySiteContactDisplay",
             "mData" : "9"
         }],
         "aaSorting" : [[1, 'RequestDescription']]
     })
 });
</script>

Many thanks in advance

For some reason, maybe my browser is old, it is no longer allowing me to click on Add commnt.

Iny anycase, thanks for pointing that out. I don't know why it disappeared after my post.

My code has tick marks.

Needless to say, that's not the problem.

Eduardo, please forgive me. for some reason, just today, this is not allowing me to Add comments.

so, I am doing it here.Naybe old browser.

I think the way I am doing it should work though.

So, I am really not sure what the problem is.

I will attempt to change to your suggestion but not sure that's the solution here.

Answer 1

You're missing a closing quote in this line -

var oTable = $('#example).dataTable({

It should be -

var oTable = $('#example').dataTable({

Answer 2

You need to return the response of the server on a specific format, also if the quote is missing like @Jay Blanchard say it won't work. but if it was a typo maybe the response that you're sending back from your php script

"sAjaxSource" : "filltable.php"

Is not correct, look at the documentation

Server side processing Datatables

Also in the aaSoring you need to specify the column index and then the desired order

[[1, 'desc']]
[[1, 'asc']]

I did't realized that you're using mData to map your columns to the JSON properties my bad, if you are trying to make your columns match your index of the data on the JSON object your need to set an integer otherwise it will try to look for something like this

{"2":"Your val"}

Setting mData with an integer will look for the index, maybe that's why it is stopping on the loading data from server step.

http://datatables.net/ref#mData