Geek asks and answers

Amount column value using datatable (Updated)

I want to sum the column values earningfor the total at the end of the code. I use Jquery datatableto filter records by this code, but I can not write code for total.Ive also tried footer callback of datatable, but does not get the desired result.

If anyone knows what pls helps me.

        <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>
+3
source share
2 answers

Here is the solution: - Use the footer callback function for this. This callback starts at every draw. therefore, whenever the contents of the table changes, this function starts and changes the total salary on the page.

       

<div class="container">

<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
    <thead>
        <tr>
            <th>Name</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>500</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>200</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>200</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>200</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
           <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>lod</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>aeda</td>
            <td>100</td>
        </tr>
        <tr>
             <td>xyz</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>xyz</td>
            <td>100</td>
        </tr>
        <tr>
            <td>xyz</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
        <td colspan='2'> <span style="float:right;"id ='totalSalary'>dsada </span> </td>
        </tr>

    </tfoot>
</table>

        </div>

<script>
    $(document).ready(function() {
        $('#example').dataTable({   
            "sPaginationType": "full_numbers",
            "footerCallback": function ( row, data, start, end, display ) {
                    var api = this.api(), data;  
                    // Remove the formatting to get integer data for summation
                    var intVal = function ( i ) {
                        return typeof i === 'string' ? i.replace(/[\$,]/g, '')*1 : typeof i === 'number' ?  i : 0;
                    };

                    // total_salary over all pages
                    total_salary = api.column( 1 ).data().reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    },0 );

                    // total_page_salary over this page
                    total_page_salary = api.column( 1, { page: 'current'} ).data().reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );

                    total_page_salary = parseFloat(total_page_salary);
                    total_salary = parseFloat(total_salary);
                    // Update footer
                    $('#totalSalary').html(total_page_salary.toFixed(2)+"/"+total_salary.toFixed(2));               
                },      
        });
    });

</script>

Working demo: http://jsfiddle.net/ishandemon/tb058mLq/2/

+4

, , initFilter init, initTable. , .

0

More articles:


All Articles