CODEWITHSUNDEEP
jquerydatatables
Robert
Robert

Reputation: 159

Using jQuery Datatable's fnFooterCallback after adding data using fnAddData

I'm trying to get the total of my Totals column placed in the footer using "fnFooterCallback" but I'm not having any luck and I keep getting the "Cannot reinitialise Datatable" warning on me.

Here is my HTML code:

        <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>

any my jQuery code:

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

I know creating a second call to dataTable is my problem, but I'm not sure how else to call the "fnFooterCallback" after I've added data using dnAddData

Upvotes: 2

Views: 6061

Answers (2)

Robert
Robert

Reputation: 159

So I figured it out.

I had it backwards. I needed to initialize the table first and use fnFooterCallback while assigning it to a variable.

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

and then add the data by chaining the fnAddData call to the variable

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

Upvotes: 1

simongus
simongus

Reputation: 440

I would use the callback fnCreateRow and keep the total in a public variable.

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

However, why don't you use the "items" as data source instead of adding to the table? You are trying to initialize the table twice. 

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

Upvotes: 0

Related Questions