DataTables

I think the issue is with the JSON data I am sending from the server to the client. Clearly, something is missing. I even tried sending a totally unrelated JSON I got from somewhere else, and datatables did the same thing: It displayed "Processing..." but never processed anything.

Could anyone point out any fields I might be missing?

I seem to having a similar problem as well. One thing you might want to try is to turn server-side processing off and test it.

My problem is that the datatable will not render the json response for server-side processing, but the EXACT same json will render correctly with server-side processing off.

I don't have a solution yet. I have made sure to have the most up to date json, jquery, and dataTables. Problem still exists.

Here's my JSON response. Everything looks right to me except that I am missing the optional sColumns param.

{
    "sEcho": 0,
    "iTotalRecords": 2,
    "iTotalDisplayRecords": 2,
    "aaData": [
        [
            "",
            "<a class=\"view_claim\" href=\"/claims/view/551110/\">551110</a>",
            "07/25/2011",
            "TPA1",
            "STD",
            4,
            "James Fulbright",
            "",
            "<a class=\"attach search\" href=\"/claims/attach/12958873/551110/std_claims/\">Attach</a>"
        ],
        [
            "",
            "<a class=\"view_claim\" href=\"/claims/view/12548/\">12548</a>",
            "07/19/2011",
            "TPA1",
            "STD",
            16,
            "Wendal Lolley",
            "",
            "<a class=\"attach search\" href=\"/claims/attach/12958873/12548/std_claims/\">Attach</a>"
        ]  
    ]  
}

Also here is how I initialize the table:

HTML:

    <table class="claims-search-table">
      <thead>
        <tr>
          <th class="left"></th>
          <th>Claim #</th>
          <th>Date Received</th>
          <th>Source</th>
          <th>Claim Type</th>
          <th>Employee #</th>
          <th>Employee Name</th>
          <th class="right"></th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>

JS:

$(document).ready(function() {

...

  // claims search datatable
  var claims_search_dt = $(".claims-search-table").dataTable({
      "bAutoWidth": false,
      "bProcessing": true,
      "bServerSide": true,
      "sAjaxSource": '/claims/search-claims/<?php echo $this->incident->id; ?>/',
      "fnServerData": function ( sSource, aoData, fnCallback ) {
        aoData = { has_select: 1 };
        if ($('.claims-search-table').data("searchQuery")) { 
          $.extend(aoData, $('.claims-search-table').data("searchQuery")); 
        }
        $.getJSON( sSource, aoData, function (json) { fnCallback(json);	} );
      },
      "aoColumns": [ 
        { "bSortable": false }, 
        { "sName": "incident_number"},
        { "sName": "case_number"},
        { "sName": "employee_number"},  
        { "sName": "employee_last_name"},  
        { "sName": "employee_first_name"}, 
        { "sName": "open_date"},  
        { "bSortable" : false}, 
        { "bSortable" : false} 
      ],
      "oLanguage": {
        "sLengthMenu": "Show _MENU_",
        "sProcessing": ""
      },
      "sDom": '<"fr"l><"table-top"r>t<"table-bottom"ip>'
  });

When bServerSide is set to true, the ajax request is made and returns the JSON above, but hangs on processing instead of rendering the table. When bServerSide is set to false, ajax request is made and returns the JSON above, but renders the table as expected.

allan said: Server-side processing requires the server to respond with more parameters that client-side processing with Ajax sourced data: <a href="http://datatables.net/usage/server-side"; target="_blank" rel="nofollow">http://datatables.net/usage/server-side</a>; .<br>
<br>
What does your JSON return look like?<br>

Yup - sEcho should never be 0 :-). It should be 1 initially and then increasing once for every request to the server. This is to stop rapid Ajax requests from getting muddled up.

So with that fixed, does it now work okay for you? The rest of your code looks fine.

Allan

here is the debug
http://debug.datatables.net/alovic

aaData: [{id:18, Name:Emkay Entertainments, Address:Nobel House, Regent Centre, Town:Lothian},…]
0: {id:18, Name:Emkay Entertainments, Address:Nobel House, Regent Centre, Town:Lothian}
Address: "Nobel House, Regent Centre"
Name: "Emkay Entertainments"
Town: "Lothian"
id: 18
1: {id:19, Name:The Empire, Address:Milton Keynes Leisure Plaza, Town:Buckinghamshire}
2: {id:20, Name:Asadul Ltd, Address:Hophouse, Town:Essex}
3: {id:22, Name:Ashley Mark Publishing Company, Address:1-2 Vance Court, Town:Tyne & Wear}
4: {id:23, Name:MuchMoreMusic Studios, Address:Unit 29, Town:London}
5: {id:24, Name:Victoria Music Ltd, Address:Unit 215, Town:London}
6: {id:25, Name:Abacus Agent, Address:Regent Street, Town:London}
7: {id:27, Name:Pyramid Posters, Address:The Works, Town:Leicester}
8: {id:28, Name:Kingston Smith Financial Services Ltd, Address:105 St Peter's Street, Town:Herts}
9: {id:29, Name:Garrett Axford PR, Address:Harbour House, Town:West Sussex}
iTotalDisplayRecords: 93
iTotalRecords: 100
sEcho: "9"