File
Add library
Share
Login or Register
Help
HTML
 
​
<html>
  <head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
​
    <title></title>
  </head>
  <body>
    <div class="container">
       <table id="selectedItems" class="table table-bordered table-hover">
         <thead>
           <tr>
             <th>Product</th>
             <th>Price</th>
             <th>Qnty</th>
             <th>Sub Total</th>
           </tr>
         </thead>
         <tbody>
         </tbody>
         <tfoot>
           <tr>
             <td></td>
             <td></td>
             <td><h3>Total:</h3> </td>
             <td></td>
           </tr>
         </tfoot>
      </table>
    </div>
  </body>
</html>
CSS
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScript
 
​
var dataSet = [
["V60 Coffee", "14","1"],
["V60 Coffee", "14","1"],
];
​
​
$(document).ready(function() {
  $("#selectedItems").DataTable({
    "data" : dataSet,
    "columns":[
            { title: "Product" },
      { title: "Price" , render: function(data)
       {
        return "<p>" + data + "</p>";
       } 
      },
       { title: "Quantity", render: function(data)
        {
           return "<p>" + data + "</p>";
         } 
       },
      { title: "subtotal", render: function(data, type, row)
       {
       var subTotal;
       subTotal= row[1]*row[2];
       return subTotal;
       } 
      },
    ],
    "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) {
        console.log(i)
        return typeof i === 'string' ?
          i.replace(/[\$,]/g, '') * 1 :
        typeof i === 'number' ?
          i : 0;
      };
​
      // Total over all pages
      totalsum = api
                .cells( null, 3, { page: 'current'} )
                .render('display')
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
​
      $(api.column(3).footer()).html(
        '(' + totalsum + ' SAR) '
      );
    },
});
});
​
​
​
​
1 error 1 warning
Line 33: 'data' is already defined.
Line 36: Missing semicolon.
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers