将 JSON 数据添加到页脚 <tfoot> 的数据表答案

【问题标题】：Datatables adding JSON data to footer <tfoot>将 JSON 数据添加到页脚 <tfoot> 的数据表
【发布时间】：2015-04-19 02:28:13
【问题描述】：

我正在使用数据表以 JSON 格式显示一些数据，并且我在 JSON 底部包含了查询总数，如下所示：

{
    "data": [
        {
            "id": "1",
            "provider_num": "381301",
            "provider_name": "COTTAGE GROVE COMMUNITY HOSPITAL",
            "261_total_bad_debts": "$0",
            "271_medicare_bad_debts": "$79,275",
            "281_non_medicare_bad_debts": "$-79,275",
            "1_cost_to_charge_ratio": "0.703459",
            "291_cost_of_non_mcr_bad_debts": "$-55,767"
        }
    ],
    "total_bad_debts": 0,
    "total_medicare_bad_debts": 79275,
    "total_non_medicare_bad_debts": -79275,
    "total_cost_of_non_mcr_bad_debts": -55767
}

我对如何将它们添加到表的页脚有点困惑，就像在我可以直接访问 php 变量之前一样，现在我将它们编码到 JSON 中。如果有人对此有任何经验并在数据表初始化中使用footerCallback，那就太好了。

提前致谢

【问题讨论】：

标签： jquery json jquery-datatables

【解决方案1】：

您可以在 DataTables 页脚中使用来自 JSON 响应的数据，如下所示。

$('#example').dataTable( {
   'ajax': 'data/arrays.txt',
   'footerCallback': function( tfoot, data, start, end, display ) {    
      var response = this.api().ajax.json();
      if(response){
         var $td = $(tfoot).find('td');
         $td.eq(0).html(response['total_bad_debts']);
         $td.eq(1).html(response['total_medicare_bad_debts']);
         $td.eq(2).html(response['total_non_medicare_bad_debts']);
         $td.eq(3).html(response['total_cost_of_non_mcr_bad_debts']);
      }
   } 
});

【讨论】：

【解决方案2】：

$('#example').dataTable( {
       'ajax': 'data/arrays.txt',
       'footerCallback': function( row, data, start, end, display ) {    

            var api = this.api();
            var response = this.api().ajax.json();
            if (response) {

                $(api.column(3).footer()).html(
                    response.total_bad_debts
                );

                $(api.column(4).footer()).html(
                    response.total_medicare_bad_debts
                );

                $(api.column(5).footer()).html(
                    response.total_non_medicare_bad_debts
                );

                $(api.column(6).footer()).html(
                    response.total_cost_of_non_mcr_bad_debts
                );
            }
        } 
    });

【讨论】：