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

注: これには、 elementでヘッダーを指定する必要はありませんtable。必要なのは空の だけ<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 インライン スタイルが追加されます。

後で戻ってすべての要素のすべての高さスタイルを変更したい場合を除き、データテーブルを初期化する直前に table 要素を必ず show() してください。

// 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 に答える