10

我在这里按照示例进行操作。使用包含对象的数组。

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

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

4

5 回答 5

41

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

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

注意：这不需要您在tableelement中指定标题。您所需要的只是一个空的<table>，这将起作用。文档在这里。

于 2014-03-18T17:09:22.417 回答
5

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

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

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

于 2012-07-10T16:04:02.137 回答
2

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

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

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

// initialize your datatable
$('#dtableid').DataTable({ 
   data: data,
   // .. other init options
})
于 2018-03-20T12:39:52.837 回答
1

下面将动态创建标题

$('#dtableid').DataTable({
  "aaData": [
    {
      "abc": "123",
      "xyz": 456
    },
     {
      "abc": "123",
      "xyz": 456
    }
  ],
  "aoColumns": [
    {
      "mData": "abc",
      "title": "ABC",
      "bSortable": true
    },
    {
      "mData": "xyz",
      "title": "XYZ",
      "bSortable": true
    }
  ]
});
于 2016-03-17T07:11:11.677 回答
1

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

"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"
    }
于 2020-01-29T07:08:02.407 回答