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 href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
     <table id="example" cellpadding="0" cellspacing="0" border="0" class=" table table-bordered table-striped display compact" style="width:100%">
<thead>
<tr style="text-align: center;vertical-align: middle;">
<th style="font-size:10px;width:40px;" title="Sl No.">Sl <br>No.</th>   
<th style="font-size:10px;width:40px;" title="Cash Entry Id">Cash Book Entry<br>ID <br> [Date]</th>
<th style="font-size:10px;width:40px;" title="Through">Through</th>
<th style="font-size:10px;width:40px;" title="Type">Type</th>
<th style="font-size:10px;width:40px;" title="From">From</th>
<th style="font-size:10px;width:40px;" title="Bank Name">Bank <br>Name</th>
<th style="font-size:10px;width:40px;" title="Account No">Account<br> No</th>
<th style="font-size:10px;text-align: left;" title="Mode">Payment<br> Mode</th>
<th style="font-size:10px;text-align: left;" title="Ref No">Ref No</th>
<th style="font-size:10px;width:40px;" title="Previous Bal">Previous<br> Balance</th>
<th style="font-size:10px;width:40px;" title="Cash cr">Cash <br> Credit</th>
<th style="font-size:10px;width:40px;" title="Cash dr">Cash <br>Debit</th>
<th style="font-size:10px;width:40px;" title="Reason">Reason</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center;">1</td>
<td  style="font-size: 10px;color: black; text-align: center;">1<br>[06-10-2021]</td>
<td  style="font-size: 10px;color: black">Direct</td>
<td  style="font-size: 10px;color: black">Credit</td>
<td  style="font-size: 10px;color: black">Ocean Services</td>
<td  style="font-size: 10px;color: black">ABC Bank</td>
<td  style="font-size: 10px;color: black">583245</td>
<td  style="font-size: 10px;color: black">Self Cheque</td>
<td  style="font-size: 10px;color: black">Cheque No. 0035871</td>
<td style="text-align: right;font-size: 10px;color: black">15000.00</i>
</td>
​
<td  style="text-align: right;font-size: 10px;color: black">15000.00</td>
​
<td  style="text-align: right;font-size: 10px;color: black"></td>
​
<td  style="font-size: 10px;color: black"></td>
<!-- <td  style="font-size: 11px;color: black">Withdrawn 15k from HDFC to make small cash payments.</td> -->
</tr>
<tr>
<td style="text-align: center;">2</td>
<td  style="font-size: 10px;color: black; text-align: center;">2<br>[06-10-2021]</td>
<td  style="font-size: 10px;color: black">Direct</td>
<td  style="font-size: 10px;color: black">Debit</td>
<td  style="font-size: 10px;color: black"> </td>
<td  style="font-size: 10px;color: black"> </td>
<td  style="font-size: 10px;color: black"></td>
<td  style="font-size: 10px;color: black"></td>
<td  style="font-size: 10px;color: black"></td>
<td style="text-align: right;font-size: 10px;color: black">14893.22</i>
</td>
​
<td  style="text-align: right;font-size: 10px;color: black"></td>
​
<td  style="text-align: right;font-size: 10px;color: black">106.78</td>
​
<td  style="font-size: 10px;color: black">Petrol/Diesel</td>
<!-- <td  style="font-size: 11px;color: black">Paid 1 Liter petrol charges to Security person for getting company items. Bill attached.</td> -->
​
</tr>
<tr>
<td style="text-align: center;">3</td>
<td  style="font-size: 10px;color: black; text-align: center;">3<br>[06-10-2021]</td>
<td  style="font-size: 10px;color: black">Direct</td>
<td  style="font-size: 10px;color: black">Debit</td>
<td  style="font-size: 10px;color: black"> </td>
<td  style="font-size: 10px;color: black"> </td>
<td  style="font-size: 10px;color: black"></td>
<td  style="font-size: 10px;color: black"></td>
<td  style="font-size: 10px;color: black"></td>
<td style="text-align: right;font-size: 10px;color: black">13415.10</i>
</td>
​
<td  style="text-align: right;font-size: 10px;color: black"></td>
​
<td  style="text-align: right;font-size: 10px;color: black">1478.12</td>
​
<td  style="font-size: 10px;color: black">Others</td>
<!-- <td  style="font-size: 11px;color: black">Paid Transportation charges for Auto Rickshaw.</td> -->
​
</tr>
<tr>
<td style="text-align: center;">4</td>
<td  style="font-size: 11px;color: black; text-align: center;">36<br>[07-10-2021]</td>
<td  style="font-size: 11px;color: black">Payable</td>
<td  style="font-size: 11px;color: black">Debit</td>
<td  style="font-size: 11px;color: black"></td>
<td  style="font-size: 11px;color: black"></td>
<td  style="font-size: 11px;color: black"></td>
<td  style="font-size: 11px;color: black">Cash</td>
<td  style="font-size: 11px;color: black">None</td>
<td style="text-align: right;font-size: 11px;color: black">13414.52</td>
<td  style="text-align: right;font-size: 11px;color: black">0.00</td>
<td  style="text-align: right;font-size: 11px;color: black">0.58</td>
​
<td  style="font-size: 11px;color: black"></td>
</tr>
<tr>
<td style="text-align: center;">5</td>
<td  style="font-size: 11px;color: black; text-align: center;">88<br>[01-10-2021]</td>
<td  style="font-size: 11px;color: black">Payable</td>
<td  style="font-size: 11px;color: black">Debit</td>
<td  style="font-size: 11px;color: black"></td>
<td  style="font-size: 11px;color: black"></td>
<td  style="font-size: 11px;color: black"></td>
<td  style="font-size: 11px;color: black">Cash</td>
<td  style="font-size: 11px;color: black"></td>
<td style="text-align: right;font-size: 11px;color: black">13314.52</td>
<td  style="text-align: right;font-size: 11px;color: black">0.00</td>
<td  style="text-align: right;font-size: 11px;color: black">100.00</td>
​
<td  style="font-size: 11px;color: black"></td>
</tr>
<tr>
<td style="text-align: center;">6</td>
<td  style="font-size: 11px;color: black; text-align: center;">38<br>[08-10-2021]</td>
<td  style="font-size: 11px;color: black">Payable</td>
<td  style="font-size: 11px;color: black">Debit</td>
<td  style="font-size: 11px;color: black"></td>
<td  style="font-size: 11px;color: black"></td>
<td  style="font-size: 11px;color: black"></td>
<td  style="font-size: 11px;color: black">Cash</td>
<td  style="font-size: 11px;color: black">None</td>
<td style="text-align: right;font-size: 11px;color: black">0.52</td>
<td  style="text-align: right;font-size: 11px;color: black">0.00</td>
<td  style="text-align: right;font-size: 11px;color: black">13314.00</td>
​
<td  style="font-size: 11px;color: black"></td>
</tr>
<tr>
<td style="text-align: center;">7</td>
<td  style="font-size: 10px;color: black; text-align: center;">7<br>[13-10-2021]</td>
<td  style="font-size: 10px;color: black">Direct</td>
<td  style="font-size: 10px;color: black">Credit</td>
<td  style="font-size: 10px;color: black">Ocean Services</td>
<td  style="font-size: 10px;color: black">Central Bank</td>
<td  style="font-size: 10px;color: black">568744</td>
<td  style="font-size: 10px;color: black">Self Cheque</td>
<td  style="font-size: 10px;color: black">Cheque No. 84520</td>
<td style="text-align: right;font-size: 10px;color: black">1000.52</i>
</td>
​
<td  style="text-align: right;font-size: 10px;color: black">1000.00</td>
​
<td  style="text-align: right;font-size: 10px;color: black"></td>
​
<td  style="font-size: 10px;color: black"></td>
<!-- <td  style="font-size: 11px;color: black">Withdrawn 1k cash via Self Cheque.</td> -->
</tr>
</tbody>
</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;
}
th { white-space: nowrap; }
JavaScriptSaved
 
$(document).ready(function() {
  var table = $('#example').DataTable( {
      dom: 'l<"toolbar">frtip',
        "footerCallback": function ( row, data, start, end, display ) {
            var api = this.api();
 // Update div.toolbar with comma seperated values
var numFormat = $.fn.dataTable.render.number( ',', '.', 2).display;
                                             
            // 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 over all pages
    total = api
        .column( 9 )
        .data()
        .reduce( function (a, b) {
            return intVal(a) + intVal(b);
        }, 0 );
 
    total1 = api
        .column( 10 )
        .data()
        .reduce( function (a, b) {
            return intVal(a) + intVal(b);
        }, 0 );
          
    total2 = api
        .column( 11 )
        .data()
        .reduce( function (a, b) {
            return intVal(a) + intVal(b);
        }, 0 );
 
    // Total over this page
    pageTotal = api
        .column( 9, { page: 'current'} )
        .data()
        .reduce( function (a, b) {
            return intVal(a) + intVal(b);
        }, 0 );
 
    pageTotal1 = api
        .column( 10, { page: 'current'} )
        .data()
        .reduce( function (a, b) {
            return intVal(a) + intVal(b);
        }, 0 );
​
    pageTotal2 = api
        .column( 11, { page: 'current'} )
        .data()
        .reduce( function (a, b) {
            return intVal(a) + intVal(b);
        }, 0 );
          
           $( "div.toolbar" ).html(
                '$'+pageTotal +' ( $'+ total +' total), $'+pageTotal1 +' ( $'+ total +' total)'
            );
​
 /*
    // Update footer
    $( api.column( 9 ).footer() ).html(
        +pageTotal +' ( '+ total +' total)'
    );
 
    $( api.column( 10 ).footer() ).html(
        '$'+pageTotal1 +' ( $'+ total1 +' total)'
    );
          
    $( api.column( 11 ).footer() ).html(
        '$'+pageTotal2 +' ( $'+ total1 +' total)'
    );
    */
        }
    } );
    //$("div.toolbar").container($footerCallback).appendTo(table);
  
​
} );
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers