在 Grocery CRUD 2.0.1 中显示 DataTable 列的总和

Question

我正在使用 Grocery CRUD 2.0.1 和 Code Igniter 4.5.1 下的 DataTables 主题

结果表的每列底部都有一个自动过滤器，并且根据使用的关键字，动态过滤显示的行。

我有一列（总计），我想计算所有显示（过滤后）结果的总和并将其显示在特定的 div 中。

我尝试了很多方法，但我无法找到实现它的方法。

我在 datatables.js 文件中使用了以下代码

$(document).ready(function() {
    console.log("Script running!");
    function calculateGrandTotal(table) {
        console.log("table:", table); // Log the table object
        var totalElements = table.column('.total').data().toArray(); // Get data from "total" column
        if (!totalElements) {
            console.error("Could not calculate totalElements!");
            return;
        }
        console.log("totalElements:", totalElements); // Log the data array
        var grandTotal = 0;
        for (var i = 0; i < totalElements.length; i++) {
            var price = parseFloat(totalElements[i]);
            grandTotal += price;
        }
        return grandTotal.toFixed(2);
    }
    var grandTotalElement = document.getElementById("grand-total-display"); //The div id in the View
    var table = $('.groceryCrudTable').DataTable; // Get DataTable instance from the event target
    if (table) {
        console.log("DataTable instance found!");
        grandTotalElement.textContent = "Grand Total: " + calculateGrandTotal(table) + " DA";
    } else {
        console.error("DataTables not found on the table!");
    }
});

然后控制台返回以下内容：

这是我在到处尝试、修补和搜索后所能得到的最接近的结果。

初始化的 DataTable 实例似乎无法识别列方法，并且我不知道如何访问这些列值以便对它们求和。有关信息，我可以使用控制器中的以下代码将名为 .total 的特定 css 类分配给我的目标列：

$crud->callbackColumn('Total', function ($value, $row) {return "<p class=\"total\">$value</p>";

但是如果你有更好的主意，我洗耳恭听。

Grocery CRUD 2.0.1 使用的 DataTables 版本似乎不是最新的（我认为是 1.9.2），所以我发现的许多建议想法并不适用或导致不兼容问题，或者可能只是我的问题...

如果杂货 CRUD 和 Javascript 方面的任何专家可以提供帮助，我将不胜感激。

Answer 1

您可以使用数据表回调，如下所示：

$(function() {
  $('#groceryCrudTable').DataTable({
    "footerCallback": function(row, data, start, end, display) {
      var api = this.api(),
        data;

      total = api
        .column(3)
        .data()
        .reduce(function(a, b) {
          return parseInt(a) + parseInt(b);
        }, 0).toFixed(2);

      $('#grand-total-display').val(total);
    }
  });

});

<link rel="stylesheet" href="https://cdn.datatables.net/2.0.7/css/dataTables.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/2.0.7/js/dataTables.min.js"></script>
<table id="groceryCrudTable" class="table table-striped first-table" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Salary</th>

    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>45000</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>55000</td>
    </tr>

  </tbody>
</table>

<br>
<br>
<input type="text" id="grand-total-display">