Jquery数据表未显示列标题

Question

我在这里的例子.使用包含对象的数组.

我在这样的for循环中创建我的数组

historyArray[i] = {
    "User": strUserName, 
    "Timestamp" : date.toString(), 
    "Latitude" : point.lat, 
    "Longitude" : point.lng
};

我的数据表实现:

$(document).ready(function() {
    $('#dynamic').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="report"></table>');
    $('#report').dataTable({
        "aaData": historyArray,
        "aoColumns": [
            { "mDataProp": "User" },
            { "mDataProp": "Timestamp" },
            { "mDataProp": "Latitude" },
            { "mDataProp": "Longitude" }
        ],
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "sDom": '<"H"Tfr>t<"F"ip>',
        "oTableTools": {
            "sSwfPath": "swf/copy_csv_xls_pdf.swf",
            "aButtons": ["copy", "csv", "xls", "pdf"]
        }
    }); 
});

我正确地获取数据,但没有列标题,我错过了什么？

Answer 1

如果您以对象数组的形式传递数据,则需要手动指定每列的标题:

data = this.SearchController.resultSet;
this.$tableContainer.dataTable({
    data:    data,
    columns: [
    {
        data: "H",
        title: "Thickness"
    },
    {
        data: "InstanceId",
        title: "Instance ID"
    }]
});

注意:这会不会要求你在指定标题table元素.你需要的只是一个空的<table>,这将是有效的.文档在这里.

Answer 2

尝试<table>像这样改变你的元素：

<table id=report>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
</table>

这样就创建了标题。如果您单击示例页面上的查看源代码，您将看到相同的实现。