File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.3/b-2.0.1/b-colvis-2.0.1/b-html5-2.0.1/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.3/b-2.0.1/b-html5-2.0.1/datatables.min.js"></script>
    
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="haddy" class="display nowrap" width="100%">
      </table>
    </div>
  </body>
</html>
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScriptSaved
 
$(document).ready( function () {
var scol = '[{"data":"1st","title":"1st","mData":"1st","sTitle":"1st"},{"data":"2end","title":"2end","mData":"2end","sTitle":"2end"},{"data":"3rd","title":"3rd","mData":"3rd","sTitle":"3rd"},{"data":"4th","title":"4th","mData":"4th","sTitle":"4th"},{"data":"5th","title":"5th","mData":"5th","sTitle":"5th"},{"data":"6th","title":"6th","mData":"6th","sTitle":"6th"}]';
var sData = '[{ "ReceiptDate": "2021/07/18", "1st": 1, "2end": 0, "3rd": 100, "4th": 1, "5th": 1, "6th": 0, "7th": 1}, { "ReceiptDate": "2021/07/19", "1st": 5, "2end": 2, "3rd": 60, "4th": 1, "5th": 1, "6th": 40, "7th": 3}, { "ReceiptDate": "2021/08/02", "1st": 3, "2end": 1, "3rd": 67, "4th": 0, "5th": 0, "6th": 67, "7th": 1}, { "ReceiptDate": "2021/08/30", "1st": 1, "2end": 0, "3rd": 100, "4th": 0, "5th": 0, "6th": 100, "7th": 0}]';
    var dataColumn = JSON.parse(scol);
    var dataValue = JSON.parse(sData);
  
  
              var footer = '<tfoot id="rptFooter"><tr class="dataFooter">';
            $.each(dataColumn, function (i, j) {
                footer = footer + '<th></th>';
            });
            $('#haddy').append(footer + '</tr></tfoot>');
​
  
  
    $('#haddy').DataTable({
        dom: 'lBfrtipF',
        "data": dataValue,
        "columns": dataColumn,
        "buttons": [
            {
                extend: 'copyHtml5',
                text: 'Copy',
                titleAttr: 'Copy',
                title: 'Haddy',
                exportOptions: {
                    columns: ':visible'
                },
                footer: true
            },
            {
                extend: 'excelHtml5',
                text: 'Excel',
                titleAttr: 'Excel',
                title: 'Haddy',
                footer: true,
                exportOptions: {
                    columns: ':visible'
                }
            }
        ],
        "fnFooterCallback": function (tfoot, data, start, end, display) {
            var api = this.api();
            // 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;
            };
 
            api.columns().every(function () {
              
            
            // Total over all pages
            total = this
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
​
            // Update footer
            $( this.footer() ).html(
                total
            );
            });
​
        }
    });
    
          } );
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers