CODEWITHSUNDEEP
jqueryjsondatatables
Habitat
Habitat

Reputation: 709

Datatables adding JSON data to footer <tfoot>

I am using datatables to display some data in JSON format and I've included the query totals at the bottom of the JSON like so:

{
    "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
}

I'm a bit confused on how I can add them to the footer of my table as before I had access to the php variables directy and now I'm encoding them in the JSON. If anyone has any experience with this and using footerCallback in the datatables initialization that would really be great.

Thanks in advance

Upvotes: 5

Views: 6924

Answers (2)

Gyrocode.com
Gyrocode.com

Reputation: 58930

You can do use data from JSON response in DataTables footer as shown below.

$('#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']);
      }
   } 
});

Upvotes: 14

Vaghani Janak
Vaghani Janak

Reputation: 611

$('#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
                );
            }
        } 
    });

Upvotes: 0

Related Questions