JSFiddle - React, Tailwind, and code Playground

by Marcelo Leiva

HTML

<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.5/css/jquery.dataTables.min.css">

    <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"> </script>
<div class="container">
            
<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
    <thead>
        <tr>
            <th>Name</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>500</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>200</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>200</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>200</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
       ...

JavaScript

$(document).ready(function() {
    $('#example').dataTable({	
		"sPaginationType": "full_numbers",
		"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 ) {
					return typeof i === 'string' ? i.replace(/[\$,]/g, '')*1 : typeof i === 'number' ?	i : 0;
				};
	 
				// total_salary over all pages
				total_salary = api.column( 1 ).data().reduce( function (a, b) {
					return intVal(a) + intVal(b);
				},0 );
				
				// total_page_salary over this page
				total_page_salary = api.column( 1, { page: 'current'} ).data().reduce( function (a, b) {
					return intVal(a) + intVal(b);
				}, 0 );
				
				total_page_salary = parseFloat(total_page_salary);
				total_salary = parseFloat(total_salary);
				// Update footer
				$('#totalSalary').html(total_page_salary.toFixed(2)+"/"+total_salary.toFixed(2));				
			},		
	});
});