如何添加数据表自定义行呈现/聚合

问题描述

我正在尝试将自定义行添加到服务器端呈现的数据表中，以显示一列的总数以下是表格标题的方式日期 |姓名 | 金额 |参考 |

 <table id="tableExport_filter">
    <thead>
      <tr>
       <th>Date</th>
       <th>Name</th>
       <th>Amount</th>
       <th>Ref</th>
     </tr>
    </thead>
    <tbody>
     <tr></tr>
    </tbody>                                   
  </table>

使用AJAX获取数据

var dataTable = $('#tableExport_filter').DataTable({
    'processing': true,'serverSide': true,'serverMethod': 'post','ajax': {
       'url':'app/functions/collections_by_agent.PHP','data': function(data){}
    },'columns': [
      
       { data: 'date_created'},{ data: 'name'},{ data: 'amount' },{ data: 'ref' }
    ],});

我需要帮助将行附加到表格并添加金额列的总和

解决方法

我建议使用表格页脚 FirebaseMessaging .getInstance() .token .addOnCompleteListener { task -> if (task.isSuccessful) { task.result?.let { token -> println(token) } } else { println(task.exception) } } 来执行此操作，而不是在表格正文中添加新行。

步骤：

在您的 HTML 表格中，在结束 <tfoot> 标记之后添加一个空页脚：

<tbody>

向您的数据表添加 <tfoot> <tr> <th></th> <th></th> <th></th> <th></th> </tr> </tfoot> 选项：

footerCallback

在此函数中，您使用 var dataTable = $('#tableExport_filter').DataTable({ // your existing options go here "footerCallback": function( tfoot,data,start,end,display ) { var api = this.api(); $( api.column( 2 ).footer() ).html( api.column( 2 ).data().reduce( function ( a,b ) { return a + b; },0 ) ); } } ); 从表本身访问 DataTables API 函数。

然后选择页脚的第 2 列（即第 3 列）作为求和的目标。

最后，您使用 var api = this.api(); 函数对数据列索引 2 中的所有值求和。函数末尾的 reduce 是执行初始步骤时使用的起始值0 函数。

页脚回调记录为 here。

reduce 函数记录在 here 中。

datatables javascript jquery