Question

I am using Server Side processing of DataTables. Everything seems to be working fine using Firefox. However, when I view the table using Chrome none of the rows are displayed and the DataTable’s “Processing…” status label does not clear. The header, footer and column names of the table are shown, but no rows.

In Chrome, if I right click on the table, select inspect element, and select Console I don’t see any Errors, Warnings or Logs.

All the HTML for the table looks correct, the problem seems to be I thin that DataTables hasn’t put anything between the tags.

Is there some log I could look at or tool I could use to get more diagnostic info?

What would prevent DataTables adding what it got from the JSON record to the tbody section?

I’ve only started using Javascript, Jquery and DataTables a couple of days ago and am unsure how to go about tracking down the problem and resolving it. Some pointers would be appreciated.

Here’s my DataTable declaration:

<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function() {
        var oTable = $('#cars-table').dataTable({
                "bAutoWidth": false,
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "bProcessing": true,
                "bStateSave": true,
                "bServerSide": true, 
                "sAjaxSource": "/cars/get_cars_list/",
                "iDisplayLength": 10,
                "fnServerData": function ( sSource, aoData, fnCallback ) {
                    aoData.push({ "name": "where_select_box", "value": $("#select_box option:selected").val() } );
                    $.getJSON( sSource, aoData, function (json) { 
                    fnCallback(json)
                });
                },
                "aoColumnDefs": [
                        { "aTargets": [0], "bVisible": false, "bSearchable": false},
                        { 
                          "aTargets": [1], 
                           "fnRender": function ( oObj ) {
                                return '<a href=\"/cars/' + oObj.aData[0] + '/\">' + oObj.aData[1] + '</a>';
                            },
                          "bSearchable": true, 
                        },
                        { "aTargets": [2], "bSearchable": true},
                        { "aTargets": [3], "bSearchable": false, "sType": 'date'},
                        { "aTargets": [4], "bSearchable": false},
                        { "aTargets": [5], "bSearchable": false},
                ]
        });
        /* Select box */
        $('#select_box').change(function() {
            // Reload data based on choice
            oTable.fnDraw();
        });
} );
/* ]]> */
</script>

If I start Firebug, the console shows the data being returned as a JSON data structure, but this data never gets displayed in Chrome but does in Firefox.

Here’s the JSON retuned (data changed a bit as client confidential)

{
    "sEcho": 1,
    "iTotalRecords": 1049,
    "iTotalDisplayRecords": 1049,
    "aaData":[

    [
        "1",
        "car1",
        "Ford",
        "2",
        "2011-12-18",
        "159",
    ]

    ,


    [
        "2",
        "car2",
        "BMW",
        "2",
        "2011-12-18",
        "159",
    ]

    ,

    .
    .
    .

    ]
}

Here’s the HTML for the table when I do “View Source” – as you can see tbody is empty.

<div style="width:75%;"> 
<div class="demo_jui"> 
<table id="cars-table" style="width:100%;" class="display" id="example"> 
        <thead> 
                <tr class="gradeA"> 
                        <th> 
                                ID 
                        </th> 
                        <th> 
                                Name
                        </th> 
                        <th> 
                                Manufacturer 
                        </th> 
                        <th> 
                                Size 
                        </th> 
                        <th> 
                                Date 
                        </th> 
                        <th> 
                                Days
                        </th> 
                </tr> 
        </thead> 
        <tbody> 

        </tbody> 
</table> 
</div> 
</div>

Answer 1

Try and remove the extra commas ‘ , ‘
IE7 is strict enough and used to give me javascript errors on them, maybe chrome does it too (firefox is more relaxed 😀 )