Jquery数据表不显示列标题答案

【问题标题】：Jquery datatables not showing column headingsJquery数据表不显示列标题
【发布时间】：2012-07-10 15:47:12
【问题描述】：

我关注the example here。使用包含对象的数组。

我在这样的 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"]
        }
    }); 
});

我得到了正确的数据，但没有列标题，我错过了什么吗？

【问题讨论】：

标签： jquery datatables

【解决方案1】：

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

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

注意：这不会要求您在 table 元素中指定标题。您只需要一个空的<table>，就可以了。文档here。

【讨论】：

这应该是正确的答案。看起来它适合所有场景。
谢谢，我想知道为什么数据表文档中的特定示例没有提到这一点？我花了 30 分钟试图修复它阅读文档，直到我得到您的回复
非常感谢！我正在为此搜索数据表文档，但找不到。
@ViceLowe 你能把接受的答案换成这个，因为这确实有效..
我喜欢这个答案而不是选择的答案，因为它将数据和列之间的链接保持在一个地方。我在我的公司遇到了一些问题，在 HTML 中指定了标头并且他们得到了错误的数据，因为 JS 中的排序不同。这使得这种可能性大大降低。

【解决方案2】：

尝试像这样更改您的 <table> 元素：

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

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

【讨论】：

哦，以为它会动态拉动..无论如何这有效:)干杯
@VinceLowe 我认为这取决于数据的结构。我广泛使用了数据表，并且偶尔会动态显示列。例如，如果您使用 gridview (c#)，然后对其应用数据表，它将从 gridview 获取标题。此外，如果您指定自己的标题，您可以添加过滤器（如下拉菜单或文本框）。
我如上所述进行了硬编码，但在我看来，您不应该在 html 中拼出标题...我发布this re: dynamically generating headers 是希望帮助某人或得到它在某个时候工作......
虽然这确实有效，但这是错误的方法，不鼓励使用 user1429980 显示的配置选项。

【解决方案3】：

如果您在初始化数据表时传入了一个数据数组并且您的表格元素是隐藏的，那么所有的 thead/tfoot 元素以及每个子元素都会添加一个 height:0px 内联样式。

确保在初始化数据表之前显示（）表格元素，除非您想返回并更改所有元素的所有高度样式。

// unhide your table
$('#dtableid').show();

// initialize your datatable
$('#dtableid').DataTable({ 
   data: data,
   // .. other init options
})

【讨论】：

【解决方案4】：

下面将动态创建标题

$('#dtableid').DataTable({
  "aaData": [
    {
      "abc": "123",
      "xyz": 456
    },
     {
      "abc": "123",
      "xyz": 456
    }
  ],
  "aoColumns": [
    {
      "mData": "abc",
      "title": "ABC",
      "bSortable": true
    },
    {
      "mData": "xyz",
      "title": "XYZ",
      "bSortable": true
    }
  ]
});

【讨论】：

【解决方案5】：

我们也可以像这样打印数据表列标题：

"columns": [
    {
        "data": "Sno", "name": "Sno", "autoWidth": true,"title":"S.No"
    }
    ,
    {
        "data": "Result", "name": "Result", "autoWidth": true, "title": "Result",  render: function (data1, type, full, meta) {
            if (full.Count > 0) {
                return '<a style="color:blue" href="#" class="point"  onclick="ApprovalBreakUp(this)" value="' + data1 + '">' + data1 + '</a>'
            }
            else {
                return '<label>' + data1 + '</label>'
            }
        }

    }
    ,
    {
        "data": "Count", "name": "Count", "autoWidth": true, "title": "Count"
    }

【讨论】：