javascript - 使用数据表添加总时间

Question

我有下表可以区分开始时间和结束时间。之后我打算根据我在表格中所做的研究将这次的差异加起来。

我正在使用下面显示的代码并使用该代码添加以小时为单位的差异列的总和。

(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>

问题是当我搜索名称时，它应该重新计算值并仅显示 01:30:00，但它不会并保留返回的所有内容的总数。

标签： javascripthtmldatatables

Answer 1

请试试这个：

我已更改您的 footerCallback 函数以仅使用 API 过滤掉搜索到的行。更多信息可以在这里找到

(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>