Add total time with datatables-CodePudding

I have the following table that makes the difference between start time and end time. Afterwards I intend to add up the difference of this time according to the research I do in the table.

I'm doing it with the code I show below and with that code I add the total of the column of the difference in hours.

(function ($) {
 $(document).ready(function() {

    var table = $('#employeee1').DataTable({
      "footerCallback": function ( row, data, start, end, display ) {        
        var api = this.api(), data;
        total = api
            .column(3)
            .data()
            .reduce( function(cume, current, idx, api) {
              return addDurations(cume, current);
            }, "00:00:00" ); 
        $( api.column(3).footer() ).html(total);
      }
    });
  });
 })(jQuery); 
 
 function addDurations(cumeDuration, colDuration) {
    var cumeSeconds = durationToSeconds(cumeDuration);
    cumeSeconds  = durationToSeconds(colDuration);
    return secondsToDuration(cumeSeconds);
  }

  // takes a string "hh:mm:ss", creates an int:
  function durationToSeconds(duration) {
    var hms = duration.split(":");
    return (parseInt(hms[0]) * 60 * 60)   (parseInt(hms[1]) * 60)   parseInt(hms[2]);
  }

  // takes an int, creates a string "hh:mm:ss":
  function secondsToDuration(seconds) {
    var hrs = Math.trunc(seconds / (60 * 60));
    // may need to pad mins and secs with leading zero:
    var mins = String(Math.trunc((seconds - (hrs * 60 * 60)) /60)).padStart(2, '0');
    var secs = String(seconds % 60).padStart(2, '0');
    return hrs   ":"   mins   ":"   secs;
  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.11/css/dataTables.material.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>

<table class="table table-responsive table-bordered" id="employeee1">

  <thead>
    <tr>
      <th>Nome</th>
      <th>Hora Início</th>
      <th>Hora Fim</th>
      <th>Horas Consumidas</th>
    </tr> 
  </thead>
  <tbody>
    <tr> 
      <td>a</td>
            <td>11:00:00</td>
            <td>11:30:00</td> 
      <td>00:30:00</td>
        </tr>
    <tr>
      <td>a</td>
            <td>11:00:00</td>
            <td>11:30:00</td> 
      <td>00:30:00</td>
        </tr>
    <tr>
      <td>b</td>
            <td>11:00:00</td>
            <td>11:30:00</td> 
      <td>00:30:00</td>
        </tr>
    <tr>
      <td>a</td>
            <td>11:00:00</td>
            <td>11:30:00</td> 
      <td>00:30:00</td>
        </tr>
  </tbody>
  <tfoot>
        <tr>
            <td COLSPAN="3"></td>
      <th></th>
        </tr>
    </tfoot>
</table>

The problem is when I search for the name it should recalculate the value and show only 01:30:00, but it doesn't and keeps the total of everything that is returned.

CodePudding user response：

Please try this:

I have changed your footerCallback function to filter out only the searched rows using the API. More information can be found here

(function ($) {
 $(document).ready(function() {

    var table = $('#employeee1').DataTable({
      "footerCallback": function ( setting ) {        
        var api = this.api(), data;
        var total = api
            .rows({ search: 'applied' })
            .data()
            .reduce( function(cume, current, idx, api) {
              return addDurations(cume, current[3]);
            }, "00:00:00" ); 
        $( api.column(3).footer() ).html(total);
      }
    });
  });
 })(jQuery); 
 
 function addDurations(cumeDuration, colDuration) {
    var cumeSeconds = durationToSeconds(cumeDuration);
    cumeSeconds  = durationToSeconds(colDuration);
    return secondsToDuration(cumeSeconds);
  }

  // takes a string "hh:mm:ss", creates an int:
  function durationToSeconds(duration) {
    var hms = duration.split(":");
    return (parseInt(hms[0]) * 60 * 60)   (parseInt(hms[1]) * 60)   parseInt(hms[2]);
  }

  // takes an int, creates a string "hh:mm:ss":
  function secondsToDuration(seconds) {
    var hrs = Math.trunc(seconds / (60 * 60));
    // may need to pad mins and secs with leading zero:
    var mins = String(Math.trunc((seconds - (hrs * 60 * 60)) /60)).padStart(2, '0');
    var secs = String(seconds % 60).padStart(2, '0');
    return hrs   ":"   mins   ":"   secs;
  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.11/css/dataTables.material.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>

<table class="table table-responsive table-bordered" id="employeee1">

  <thead>
    <tr>
      <th>Nome</th>
      <th>Hora Início</th>
      <th>Hora Fim</th>
      <th>Horas Consumidas</th>
    </tr> 
  </thead>
  <tbody>
    <tr> 
      <td>a</td>
            <td>11:00:00</td>
            <td>11:30:00</td> 
      <td>00:30:00</td>
        </tr>
    <tr>
      <td>a</td>
            <td>11:00:00</td>
            <td>11:30:00</td> 
      <td>00:30:00</td>
        </tr>
    <tr>
      <td>b</td>
            <td>11:00:00</td>
            <td>11:30:00</td> 
      <td>00:30:00</td>
        </tr>
    <tr>
      <td>a</td>
            <td>11:00:00</td>
            <td>11:30:00</td> 
      <td>00:30:00</td>
        </tr>
  </tbody>
  <tfoot>
        <tr>
            <td COLSPAN="3"></td>
      <th></th>
        </tr>
    </tfoot>
</table>