Question

我正在尝试使用“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”

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

Answer 2

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

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

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

$("#hours").dataTable();
oTable = $("#hours").dataTable({});

使用fnAddData添加数据后使用jQuery Datatables fnFooterCallback

2 个答案: