jQuery Datatable 填充第二个标题行

Question

我有一个 jQuery 数据表，标题中有 2 行。我想用我从服务器传回的一些总值（以 JSON 格式）以及表内容的所有数据填充此标题的第二行。

我一直在寻找一种方法来做到这一点，但我正在苦苦挣扎。

从服务器获取数据后，谁能告诉我将这些值放入标头的最佳方法是什么？

这是我从服务器获取 JSON 并填充表行的方式：

$.ajax({
    url: "<?php echo $this->url($reportResource)?>"
}).done(function(data) {
    // populate the data in to the rows of the table
    reportTable.rows.add(data.rows).draw();

    // the data param here contains an item in the array which contains all 
    // of the totals I'd like to put in the 2nd header row:
    var totalValues = data.totals;
});

这是表格的 HTML：

<table class="table table-striped" id="report-table">
    <br/>
    <thead>
        <th>Impressions</th>
        <th>Sold</th>
        <th>Unsold</th>
        <th>Percentage</th>
        <th>eCPM</th>
        <th>Revenue</th>
        <th>Commision</th>
        <th>Net</th>
    </tr>
    <tr>
        <th style="text-align:right">Totals:</th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>

而返回的 JSON 是：

{
 "rows": {
     "0":{"site":"<website1>","imps":20276,"sold":17308,"unsold":2968,"percentage":85.3620043401,"eCpm":0.0909454034326,"grossRevenue":1.844009,"commission":0.5532027,"netRevenue":1.2908063},
     "1":{"site":"<website2>","imps":4485,"sold":3900,"unsold":585,"percentage":86.9565217391,"eCpm":0.0833068004459,"grossRevenue":0.373631,"commission":0.1120893,"netRevenue":0.2615417},
     "2":{"site":"<website3>","imps":37,"sold":34,"unsold":3,"percentage":91.8918918919,"eCpm":0.0665405405405,"grossRevenue":0.002462,"commission":0.0007386,"netRevenue":0.0017234},
 }
 "totals":{"imps":24798,"sold":21242,"unsold":3556,"percentage":85.6601338818,"eCpm":0.0895274618921,"grossRevenue":2.220102,"commission":0.6660306,"netRevenue":1.5540714}
}

非常感谢您的帮助。

Answer 1

首先您的 JSON 响应无效。你可能想看看 - 2:{} 的末尾有一个逗号 - 删除那个逗号，你也错过了 "totals" 之前的一个逗号。

在您的成功函数中，您可以在 <td> 后面附加值，正如我在此处尝试说明的那样：

var row = $('#totals');

// add tds to row
for (value in data.totals) {
    row.append('<td>'+ data.totals[value] +'</td>');
}

小提琴：http://jsfiddle.net/z7p3qnnt/