jquery - DataTables 在 Google Chrome 中不显示行

Question

我正在使用 DataTables 的服务器端处理。使用 Firefox 似乎一切都工作正常。但是，当我使用 Chrome 查看表时，没有显示任何行，并且 DataTable 的“正在处理...”状态标签不清晰。显示表的页眉、页脚和列名称，但不显示行。

在 Chrome 中，如果我右键单击表格，选择检查元素，然后选择控制台，我看不到任何错误、警告或日志。

表格的所有 HTML 看起来都是正确的，问题似乎是我认为 DataTables 没有在标签之间放置任何内容。

是否有一些我可以查看的日志或可以使用的工具来获取更多诊断信息？

什么会阻止 DataTables 将其从 JSON 记录获取的内容添加到 tbody 部分？

我几天前才开始使用 Javascript、Jquery 和 DataTables，不确定如何跟踪问题并解决它。一些指示将不胜感激。

这是我的数据表声明:

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

如果我启动 Firebug，控制台会显示以 JSON 数据结构形式返回的数据，但此数据永远不会在 Chrome 中显示，但会在 Firefox 中显示。

这是重新调整的 JSON(由于客户端 secret ，数据略有更改)

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

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

    ,


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

    ,

    .
    .
    .

    ]
}

这是我执行“查看源代码”时表格的 HTML - 正如您所看到的，tbody 是空的。

<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

尝试删除多余的逗号 ', ' IE7 足够严格，曾经给我提供 javascript 错误，也许 chrome 也会这样做(firefox 更轻松:D)