sum column value using datatable

Question

I want to sum earning column values to the total at end of code. I am using Jquery datatable to filter records by this code but unable to write code for the total.I've also tried footer callback of datatable but doesn't get desired result.

        <script src="media/js/jquery-1.4.4.min.js" type="text/javascript"></script>
        <script src="media/js/jquery.dataTables.min.js" type="text/javascript"></script>
        <script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.js"></script>
        <script src="media/js/jquery-ui.js" type="text/javascript"></script>
        <script src="media/js/jquery.dataTables.columnFilter.js" type="text/javascript"></script>
        <script type="text/javascript">
$(document).ready(function(){
                $.datepicker.regional[""].dateFormat = 'dd/mm/yy';
                $.datepicker.setDefaults($.datepicker.regional['']);
     $('#example').dataTable({
"aoColumns": [{},
                ]
                } )
            .columnFilter({ sPlaceHolder: "head:before",
            aoColumns: [ { type: "hidden" },
                        { type: "hidden" },
                        { type: "hidden" },
                        { type: "hidden" },
                        { type: "hidden" },
                        { type: "hidden" },
                        { type: "hidden" },
                        { type: "hidden" },
                        { type: "hidden" },
                        { type: "date-range", sRangeFormat: "From Date{from} To Date {to}" },
                        { type: "hidden" },
                        { type: "hidden" },
                        { type: "hidden" }
                ],
"fnFooterCallback": function ( nRow, aaData, iStart, iEnd, aiDisplay ) {
                        /*
                         * Calculate the total market share for all browsers in this table (ie inc. outside
                         * the pagination)
                         */
                        var iTotalMarket = 0;
                        for ( var i=0 ; i<aaData.length ; i++ )
                        {
                            iTotalMarket += aaData[i][11]*1;
                        }

                        /* Calculate the market share for browsers on this page */
                        var iPageMarket = 0;
                        for ( var i=iStart ; i<iEnd ; i++ )
                        {
                            iPageMarket += aaData[ aiDisplay[i] ][11]*1;
                        }

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

        });
});

        </script>
    </head>




<body id="dt_example">

<div id="demo">
 <table id="example" class="display">
                    <thead>
                        <tr>
                          <th>Agent Code</th>
                            <th>Agent Name</th>
                            <th>Designation</th>
                            <th>Account No.</th>
                            <th>Customer Name</th>
                            <th>Plan No.</th>
                            <th>Invoice</th>
                            <th>Bill Amt.</th>
                            <th>Bill Date</th>
                            <th>Pay Date</th>
                            <th>Insta. No.</th>
                            <th>Earning</th>
                            <th>Remark</th>                          </tr>                        
<tr>
                            <th>&nbsp;</th>
                            <th>&nbsp;</th>
                            <th>&nbsp;</th>
                            <th>&nbsp;</th>
                            <th>&nbsp;</th>
                            <th>&nbsp;</th>
                            <th>&nbsp;</th>
                            <th>&nbsp;</th>
                            <th>&nbsp;</th>
                            <th>&nbsp;</th>
                            <th>&nbsp;</th>
                            <th>&nbsp;</th>
                            <th>&nbsp;</th>
</tr>
                    </thead>

                    <tbody> 
                        <tr>
        <td></td>
  <td></td>
  <td></td>
  <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>


    <td></td>
  </tr>
                    </tbody>
                        <tfoot>
        <tr>
            <th style="text-align:right" colspan="11">Total:</th>
            <th></th>
        </tr>
    </tfoot>
  </table>
        </div>
</body>
</html>

"fnFooterCallback": function ( nRow, aaData, iStart, iEnd, aiDisplay ) { var total = 0; for ( var i=0 ; i<aaData.length ; i++ ) { total += aaData[i][11]*1; } — user3253717
– user3253717, Commented Feb 21, 2014 at 17:22
An answer removed for plagiarism notes that this can be done via a footer callback, with an example on that page. — Ryan M
– Ryan M ♦, Commented Apr 20, 2023 at 1:13

John - Not A Number · Accepted Answer · 2014-02-27 21:36:33Z

0

It looks like you have your footer callback defined in the columnFilter init options, not in the dataTable init options - I wouldn't expect it to work there.

answered Feb 27, 2014 at 21:36

John - Not A Number

6494 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dorian Rina · Accepted Answer · 2025-04-17 10:49:26Z

You can try the following code:

"fnFooterCallback": function ( nRow, aaData, iStart, iEnd, aiDisplay ) {
         var api = this.api, aaData;
        /*
         * Calculate the total market share for all browsers in this table (ie inc. outside
         * the pagination)
         */
        var iTotalMarketColumns = api.column(11, {
            search: 'applied'
        }).cache('search');
        var iTotalMarket = iTotalMarketColumns.length ? iTotalMarketColumns.reduce(function(a, b) {
            return parseFloat(a) + parseFloat(b);
        }) : 0;


        /* Calculate the market share for browsers on this page */
        var iPageMarketColumns = api.column(11, {
            search: 'current'
        }).cache('search');
        var iPageMarket = iPageMarketColumns.length ? iPageMarketColumns.reduce(function(a, b) {
                return parseFloat(a) + parseFloat(b);
            }) : 0;

        /* Modify the footer row to match what we want */
        $(nRow).find('th').eq(1).text(parseInt(iPageMarket * 100)/100 +'% ('+ parseInt(iTotalMarket * 100)/100 +'% total)');
}

Collectives™ on Stack Overflow

sum column value using datatable

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related