Question

我关注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"]
        }
    }); 
});

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

Answer 1

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

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

注意：不要求您在table元素中指定标题。您只需要一个空的<table>，这将有效。文档here。

Answer 2

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

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

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

Answer 3

下面将动态创建标题

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

Answer 4

如果传入数据数组并且在初始化数据表时隐藏了表元素，则所有thead / tfoot元素和每个子元素都会获得一个高度：添加0px内联样式。

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

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

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

Answer 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"
    }

Jquery数据表未显示列标题

5 个答案: