如何用數據填充/顯示添加的數據表行？

Question

我正在使用datatables.net插件執行一些ASP.NET gridview轉換。 我為什么要這樣做的答案更多，可以辯論。 但是，對於我遇到的問題之一，我需要一些幫助。

使用Javascript轉換頁面上的gridview實際上非常簡單，並且效果很好。 主要的問題是我想在數據表的主體內有一個固定的“總計”行（頁腳），以便它像表的其余部分一樣保持響應。

我試圖使用后面的代碼添加頁腳，並且可以用總數據填充該頁腳，但是它對表的其余部分沒有響應。 我假設是因為<tfoot>在<tbody> 。

使用javascript，我已經成功添加了新的數據表行，並且可以將數據輸出到控制台，但是無法用對象數據填充添加的行。

Javascript：

var sum;
$(document).ready(function () {
var table = $('#cphPage_gvTaxColl').DataTable();

//convert string to int
var intVal = function (i) {
    var j = $("<span/>");
    var txt = j.html(i).text();

    //        alert('txt :' + txt);

    var myVal = typeof txt === 'string' ?
        parseFloat(txt.replace(/[^\d.-]/g, '')) :
        typeof txt === 'number' ?
            i : 0;
    return myVal || 0;
};

//format integer as currency
var formatSum = function (myVal) {
    return accounting.formatMoney(myVal, {
        symbol: "$",
        precision: 2,
        thousand: ",",
        decimal: ".",
        format: {
            pos: "%s %v",
            neg: "%s (%v)",
            zero: "%s  0.00"
        }
    });
};

//add total row and determine index
table.row.add(['GRAND TOTAL']).draw();
var total_row = (table.row().count() + 1);
var total_col = (table.row(total_row).column().count + 1);

//alert
console.log('total row: ' + total_row);

//loop columns
table.columns('.sum').every(function () {
    sum = this
        .data()
        .reduce(function (a, b) {
            console.log('adding ' + intVal(a) + ' and ' + intVal(b));
            return intVal(a) + intVal(b);
        });

    //alert
    console.log('sum: ' + sum);

    console.log('column row 2 val: ' + this.data().row([2]));

    $(this.cell.node( total_row )).html(
                formatSum(sum)
            );

});
});

如何在數據行中顯示對象數據？

我也收到以下錯誤消息，並且不確定哪個參數丟失（第二列和第三列為null）：

錯誤信息

我在控制台數據中包含了一個屏幕截圖，如果需要，我可以提供.aspx標記：

頁面+控制台日志輸出

我仍在學習這些東西的來龍去脈。 您可以提供任何指導，我們將不勝感激。

提前致謝！

Answer 1

這是我的解決方案：

1. 的HTML表為datatables應當具有<tfoot>

像這樣：

<table id='table'>
    <tbody>
        <tr><td></td></tr>
    </tbody>
    <tfoot>
        <tr><td></td></tr>
    </tfoot>
</table>

2. 定義footerCallback字段

Datatables初始化：

$('#table').dataTable({
...
  "footerCallback": _footerDrawn
...
});

3. footerCallback ：

我使用服務器端數據，所以我的頁腳數據源只是ajax-response的另一個領域：

_footerDrawn: function( row, data, start, end, display ) {
  var table = $('#table').dataTables();
  var json = table.api().ajax.json();
    // assign values to each cell of the footer from json.total array
    $.each( table.api().columns().indexes(), function( index ) {
      $( table.api().column( index ).footer() ).html( json.total[index] );
    });
  }
}

json.total包含要在footer行中打印的字符串數組