JQueryDataTableSum

by abhijeetkarve

HTML

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
  <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.11.5/api/sum().js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

</head>

<body>

<div style="margin: 20px;">

    <table id="example" class="display dataTable cell-border" style="width:100%">
                                                <thead>
        <tr>
          <th data-priority="1">System</th>
          <th data-priority="2">Vendor #</th>
          <th data-priority="3">Vendor Name</th>
          <th data-priority="4"># Inv.</th>
          <th data-priority="5">Amount Inv.</th>
          <th data-priority="6"># PO Related</th>
          <th data-priority="7">Amount PO Related</th>
          <th data-priority="8"># Credits</th>
          <th data-priority="9">Amount Credits</th>
        </tr>
    </thead>
    <tbody>
        <tr>
              <td>Oracle</td>
              <td>1</td>
              <td>3M Comm</td>
              <td>2</td>
              <td>4156.1</td>
              <td>2</td>
              <td>4156.1</td>
              <td>0</td>
              <td>0</td>
          </tr>
          <tr>
            <td>Oracle</td>
            <td>2</td>
            <td>A. Schulman, Inc.</td>
            <td>33</td>
            <td>59848.37</td>
            <td>23</td>
            <td>43340.49</td>
            <td>2</td>
            <td>-4086.74</td>
            
          </tr>
    </tbody>
  <tfoot>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
               ...

JavaScript

$(document).ready( function () {
	    $('#example').DataTable( {
		    drawCallback: function () {
		      var api = this.api();
		      var sum = 0;
		      var formated = 0;
		      //to show first th
		      $(api.column(0).footer()).html('All Total');

		      for(var i=1; i<=8;i++)
		      {
		      	sum = api.column(i, {page:'current'}).data().sum();
						if (!parseInt(sum)){
              $(api.column(i).footer()).html("");
            }
            else {
		      	formated = parseFloat(sum).toLocaleString(undefined, {minimumFractionDigits:2});
		      	$(api.column(i).footer()).html(formated);
            }
		      }
			}
		});
	});