代码之家  ›  专栏  ›  技术社区  ›  Sidou

显示Grocery CRUD 2.0.1中DataTable列的总和

  •  1
  • Sidou  · 技术社区  · 1 年前

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

    生成的表在每列的底部都有一个自动过滤器,根据使用的关键字,显示的行会被动态过滤。

    我有一个列(Total),我想计算所有显示(过滤)结果的总和,并将其显示在特定的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!");
        }
    });
    

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

    enter image description here

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

    初始化的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方面的任何专家能够提供帮助,我将不胜感激。

    编辑: 在尝试了@Rohit和@Death这两个在我的环境中没有成功的真实答案后,以下是我的脚本的最后一个状态:

    var table = $('.groceryCrudTable').DataTable();
    if (table) {
    console.log("DataTable instance found!");
    console.log("table:", table); // Log the table object
    } else {
    console.error("DataTables not found on the table!");
    } 
    $('.groceryCrudTable').DataTable({
    bRetrieve: true, // I added this in reaction to the below screenshot
    "footerCallback": function() {
      var api = this.api(),
      total = api
        .column(6)
        .data()
        .reduce(function(a, b) {
          return parseInt(a) + parseInt(b);
        }, 0).toFixed(2);
     console.log("Total is:", total);
      $('#grand-total-display').val(total);
    }
    });
    

    在我添加bRetrieve功能之前,出现了以下屏幕截图: enter image description here

    我认为其中一个问题是大多数人用来解决我的问题的最新版本DataTables(2.0.7)与最新Grocery CRUD迭代使用的版本(1.9.2)之间的主要区别。还有整个CodeIgniter环境、加载的javascript库、jquery和css文件,这些都使事情变得更加复杂。

    除了发送一个要测试的应用程序的zip之外,我看不出有什么方法可以解决这个问题。

    0 回复  |  直到 1 年前
        1
  •  1
  •   Death-is-the-real-truth    1 年前

    var table = $('.groceryCrudTable').DataTable; 需要 var table = $('.groceryCrudTable').DataTable(); [我认为这只是一个典型的错误]

    现在,您可以使用如下数据表回调函数:

    $(function() {
      $('#groceryCrudTable').DataTable({
        "footerCallback": function() {
          var api = this.api(),
          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>Alive to die</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>45000</td>
        </tr>
        <tr>
          <td>Sidou</td>
          <td>Senior Javascript Developer</td>
          <td>Edinburgh</td>
          <td>55000</td>
        </tr>
        
        <tr>
          <td>Sidou-2</td>
          <td>Senior Javascript Developer</td>
          <td>Edinburgh</td>
          <td>65000</td>
        </tr>
        
        <tr>
          <td>Sidou-3</td>
          <td>Senior Javascript Developer</td>
          <td>Edinburgh</td>
          <td>75000</td>
        </tr>
    
      </tbody>
    </table>
    
    <br>
    <br>
    <input type="text" id="grand-total-display">
        2
  •  0
  •   Rohit K. Singh    1 年前

    您遇到的问题是因为没有正确引用DataTable实例。明确地 $('.groceryCrudTable').DataTable; 应该是 $('.groceryCrudTable').DataTable(); 以正确初始化DataTable实例。此外 table.column('.total').data().toArray(); 方法需要使用适当的选择器和DataTable API。

    $(document).ready(function() {
        console.log("Script running!");
        
        function calculateGrandTotal(table) {
            console.log("table:", table); // Log the table object
            
            // Get data from "total" column
            var totalElements = table.column('.total').data().toArray(); 
            
            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
        
        // Initialize DataTable instance correctly
        var table = $('.groceryCrudTable').DataTable(); 
        
        if (table) {
            console.log("DataTable instance found!");
            
            // Ensure the column selector is correct
            var grandTotal = calculateGrandTotal(table);
            if (grandTotal !== undefined) {
                grandTotalElement.textContent = "Grand Total: " + grandTotal + " DA";
            } else {
                grandTotalElement.textContent = "Grand Total: Error calculating";
            }
        } else {
            console.error("DataTables not found on the table!");
        }
    });
    
    推荐文章