在 jQuery DataTables 中使用 fnFooterCallback 添加第二个总行答案

【问题标题】：Add second total row using fnFooterCallback in jQuery DataTables在 jQuery DataTables 中使用 fnFooterCallback 添加第二个总行
【发布时间】：2014-05-25 06:45:07
【问题描述】：

我有以下页脚表：

<tfoot>
    <tr>
        <th colspan="9">Total amount:</th> 
        <th></th>
        <th></th>
    </tr>
    <tr>
        <th colspan="9">Grand total:</th> 
        <th colspan="2"></th>
    </tr>                                    
</tfoot>

我正在使用 jQuery DataTable 来呈现来自 mySQL 的数据，并且我正在使用第一个页脚行来汇总表中两列中的值，比如说 Amount 和 SAmount

"fnFooterCallback": function ( nRow, aaData, iStart, iEnd, aiDisplay ) {
    var nCells = nRow.getElementsByTagName('th');
    nCells[0].innerHTML = Amount;

    var nCells = nRow.getElementsByTagName('th');
    nCells[1].innerHTML = SAmount;
});

在第二个页脚行中，我想插入总金额和 SAmount 之间的差额。如何在第二个页脚行中插入差异总行？

【问题讨论】：

我自己找到的 var secondRow = $(nRow).next()[0]; var nCells = secondRow.getElementsByTagName('td');

标签： jquery mysql datatables

【解决方案1】：

我自己找到的

var secondRow = $(nRow).next()[0]; 
var nCells = secondRow.getElementsByTagName('td');

【讨论】：

【解决方案2】：

感谢您提供信息。如果要向数据表添加第三个页脚行，则可以使用以下内容：

var thirdRow = $($(nRow).next()[0]).next()[0]; var nCells = thirdRow.getElementsByTagName('th');

【讨论】：

这没有提供问题的答案。 OP 只询问如何添加第二行。因此，您的答案应该是对相应答案的评论，而不是答案。你可以随时对自己的帖子发表评论，一旦你有足够的reputation，你就可以comment on any post。

【解决方案3】：

如果你想使用插件导出它只会导出页脚的第一行，为了解决这个问题你可以修改dataTables.tableTools.js中的函数_fnGetDataTablesData，用这个新代码更改页脚部分：

if (oConfig.bFooter && dt.nTFoot !== null) {
    aRow = [];
    for (i = 0, iLen = dt.nTFoot.childElementCount; i < iLen; i++) {
        for (j = 0, jLen = dt.nTFoot.children[i].childElementCount; j < jLen; j++) {
            sLoopData = dt.nTFoot.children[i].cells[j].innerHTML.replace(/\n/g, " ").replace(/<.*?>/g, "");
            sLoopData = this._fnHtmlDecode(sLoopData);
            aRow.push(this._fnBoundData(sLoopData, oConfig.sFieldBoundary, regex));
        }
        aData.push(aRow.join(oConfig.sFieldSeperator));
        aRow = [];
    }
}

【讨论】：

【解决方案4】：

如果表格页脚中有任何 colspans，Ernesto Ramos 的答案将引发错误（是的，我知道数据表不支持 colspans）。 Tabletools 通过清除数据来处理错误，因此文件完全为空。

下面的这个解决方案与上面非常相似，但允许跨度。

if (oConfig.bFooter && dt.nTFoot !== null) {
    var numRows = dt.nTFoot.rows.length;

    for (j = 0; j < numRows; j++) {
        aRow = [];
        for (i = 0, iLen = dt.aoColumns.length ; i < iLen ; i++) {
            if (aColumnsInc[i] && dt.nTFoot.rows[j].cells[i] && dt.aoColumns[i].nTf !== null) {
                sLoopData = dt.nTFoot.rows[j].cells[i].innerHTML.replace(/\n/g, " ").replace(/<.*?>/g, "");
                sLoopData = this._fnHtmlDecode(sLoopData);
                aRow.push(this._fnBoundData(sLoopData, oConfig.sFieldBoundary, regex));
            }
        }

        aData.push(aRow.join(oConfig.sFieldSeperator));
    }
}

【讨论】：