Virajsinh

datatable last row total

Jun 9th, 2020
414
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.94 KB | None | 0 0
  1. //https://phppot.com/jquery/calculate-sum-total-of-datatables-column-using-footer-callback/
  2.  
  3. <html>
  4.     <head>
  5. <title>Calculate Sum (Total) of DataTables Column using Footer Callback</title>
  6.     <link rel="stylesheet"  href="vendor/DataTables/datatables.min.css">   
  7.     <link rel="stylesheet"  href="style.css">  
  8.     <script src="vendor/jquery/jquery-1.11.2.min.js" type="text/javascript"></script>
  9.     <script src="vendor/DataTables/datatables.min.js" type="text/javascript"></script>  
  10. </head>
  11. <body>
  12.     <table id="tbl-attendance" class="display nowrap" cellspacing="0" width="100%">
  13.     <thead>
  14.         <tr>
  15.         <th>Subject</th>
  16.         <th>Mon</th>
  17.         <th>Tue</th>
  18.         <th>Wed</th>
  19.         <th>Thu</th>
  20.         <th>Fri</th>
  21.         </tr>
  22.     </thead>
  23.     <tfoot align="right">
  24.         <tr><th></th><th></th><th></th><th></th><th></th><th></th></tr>
  25.     </tfoot>
  26.     </table>
  27. </body>
  28. </html>
  29.  
  30. <script>
  31. $(document).ready(function() {
  32.     $('#tbl-attendance').dataTable({
  33.         "footerCallback": function ( row, data, start, end, display ) {
  34.             var api = this.api(), data;
  35.  
  36.             // converting to interger to find total
  37.             var intVal = function ( i ) {
  38.                 return typeof i === 'string' ?
  39.                     i.replace(/[\$,]/g, '')*1 :
  40.                     typeof i === 'number' ?
  41.                         i : 0;
  42.             };
  43.  
  44.             // computing column Total of the complete result
  45.             var monTotal = api
  46.                 .column( 1 )
  47.                 .data()
  48.                 .reduce( function (a, b) {
  49.                     return intVal(a) + intVal(b);
  50.                 }, 0 );
  51.                
  52.         var tueTotal = api
  53.                 .column( 2 )
  54.                 .data()
  55.                 .reduce( function (a, b) {
  56.                     return intVal(a) + intVal(b);
  57.                 }, 0 );
  58.                
  59.             var wedTotal = api
  60.                 .column( 3 )
  61.                 .data()
  62.                 .reduce( function (a, b) {
  63.                     return intVal(a) + intVal(b);
  64.                 }, 0 );
  65.                
  66.          var thuTotal = api
  67.                 .column( 4 )
  68.                 .data()
  69.                 .reduce( function (a, b) {
  70.                     return intVal(a) + intVal(b);
  71.                 }, 0 );
  72.                
  73.          var friTotal = api
  74.                 .column( 5 )
  75.                 .data()
  76.                 .reduce( function (a, b) {
  77.                     return intVal(a) + intVal(b);
  78.                 }, 0 );
  79.            
  80.                
  81.             // Update footer by showing the total with the reference of the column index
  82.         $( api.column( 0 ).footer() ).html('Total');
  83.             $( api.column( 1 ).footer() ).html(monTotal);
  84.             $( api.column( 2 ).footer() ).html(tueTotal);
  85.             $( api.column( 3 ).footer() ).html(wedTotal);
  86.             $( api.column( 4 ).footer() ).html(thuTotal);
  87.             $( api.column( 5 ).footer() ).html(friTotal);
  88.         },
  89.         "processing": true,
  90.         "serverSide": true,
  91.         "ajax": "server.php"
  92.     } );
  93. } );
  94. </script>
Add Comment
Please, Sign In to add comment