1

我正在尝试使用“fnFooterCallback”将我的 Totals 列的总数放在页脚中，但我没有任何运气，而且我不断收到“无法重新初始化数据表”警告。

这是我的 HTML 代码：

        <table id="hours" border="1" class="display dataTable">
            <thead>
                <tr>
                    <th>
                        Order Number
                    </th>
                    <th>
                        Machine
                    </th>
                    <th>
                        Start
                    </th>
                    <th>
                        Stop
                    </th>
                    <th>
                        Total
                    </th>
                    <th>
                        Edit
                    </th>
                </tr>
            </thead>
            <tbody>                    
            </tbody>   
            <tfoot>
                <tr>
                    <th>
                        Total:
                    </th>
                </tr>
            </tfoot>
        </table>

任何我的 jQuery 代码：

for (var i = 0; i < item.length; i++) {
    // add the data to the tbody
    var oTable = $("#hours").dataTable().fnAddData([
                                    item[i].OrderNumber,
                                    item[i].MachineName,
                                    item[i].startTime,
                                    item[i].stopTime,
                                    item[i].totalTime,
                                    item[i].editButton
                                ]);

}
// after the data is added, get the total of the Totals Column
oTable = $("#hours").dataTable(  
    {
        "fnFooterCallback": function (nRow, aaData, iStart, iEnd, aiDisplay) {
                 var total = 0;
                        for (var i = 0; i < aaData.length; i++) {
                            total += aaData[i][4] * 1;
                        }

                        var page = 0;
                        for (var i = iStart; i < iEnd; i++) {
                            page += aaData[aiDisplay[i]][4] * 1;
                        }

                        /* Modify the footer row to match what we want */
                        var nCells = nRow.getElementsByTagName('th');
                        nCells[1].innerHTML = parseInt(page);
        }
        });

我知道创建对 dataTable 的第二次调用是我的问题，但我不确定在使用 dnAddData 添加数据后如何调用“fnFooterCallback”

4

2 回答 2

1

所以我想通了。

我倒过来了。我需要先初始化表并在将其分配给变量时使用 fnFooterCallback。

var oTable = $("#hours").dataTable(  
    {
        "fnFooterCallback": function (nRow, aaData, iStart, iEnd, aiDisplay) {
                 var total = 0;
                        for (var i = 0; i < aaData.length; i++) {
                            total += aaData[i][4] * 1;
                        }

                        var page = 0;
                        for (var i = iStart; i < iEnd; i++) {
                            page += aaData[aiDisplay[i]][4] * 1;
                        }

                        /* Modify the footer row to match what we want */
                        var nCells = nRow.getElementsByTagName('th');
                        nCells[1].innerHTML = parseInt(page);
        }
        });

然后通过将 fnAddData 调用链接到变量来添加数据

for (var i = 0; i < item.length; i++) {
    // add the data to the tbody
    oTable.fnAddData([
                       item[i].OrderNumber,
                       item[i].MachineName,
                       item[i].startTime,
                       item[i].stopTime,
                       item[i].totalTime,
                       item[i].editButton
                     ]);    
}
于 2013-07-30T16:43:17.823 回答
0

我会使用回调fnCreateRow并将总数保存在公共变量中。

"fnCreatedRow": function( nRow, aData, iDisplayIndex ) {
}

但是，为什么不使用“项目”作为数据源而不是添加到表中呢？您正在尝试两次初始化表。

$("#hours").dataTable();
oTable = $("#hours").dataTable({});
于 2013-07-30T15:57:35.377 回答