Footer not working

AjithkumarT

    var rid="3";
    var yr="2024";
    var mtg=0;
    var mg=0;
    var bsum=0;
    var tableTN = $('#TdataTable').DataTable( {
      columnDefs: [{
                  "className": "dt-center",
                  "targets": "_all"
    }],

             "ordering": false,
             "stateSave": true,
             "serverSide": false,
             "fixedHeader": true,
            "paging": true,
            "pageLength": 100,
            "lengthMenu": [[10, 25, 50,100, -1], [10, 25, 50,100, "All"]],

            "ajax": {
                'type': 'POST',
             'url':baseURL +'targetList',
             'data': {
           id: rid,
           year: yr
        },
             "dataSrc": function(json) {
//                    if (json.CustomVariable) {
//                        $("#some_span").html(json.CustomVariable);
//                    }
                    mtg=Math.round(json.target/12);
                    mg=mtg;
                    $('#exe').text(json.exe);
                     console.log(json.exe);
                     $('#yr').text(json.yr);
                     return json.data;
                },
          },
          'columns': [
                    { data: 'Clientname' },
                    { data: 'JAN' },
                    { data: 'FEB' },
                    { data: 'MAR' },
                    { data: 'APR' },
                    { data: 'MAY' },
                    { data: 'JUN' },
                    { data: 'JUL' },
                    { data: 'AUG' },
                    { data: 'SEP' },
                    { data: 'OCT' },
                    { data: 'NOV' },
                    { data: 'DEC' },
                    { data: 'Total' }
                ],
                        "footerCallback": function(row, data, start, end, display) {
  var api = this.api();
 var secondaryFooterValues = []; // Array to store values for secondary footer
 var thirdFooterValues = []; // Array to store values for secondary footer
 secondaryFooterValues.push("Target");
 thirdFooterValues.push("Achieved");
 var sum=0;
  api.columns('.sum', {
    page: 'current'
  }).every(function() {
    sum = this
      .data()
      .reduce(function(a, b) {
        var x = parseFloat(a) || 0;
        var y = parseFloat(b) || 0;
        return x + y;
      }, 0);

    $(this.footer()).html(sum);

    bsum=mg-sum;
    secondaryFooterValues.push(mg);

    thirdFooterValues.push(Math.round(sum/mg*100)+"%");
    mg=mtg+bsum;
  });
  secondaryFooterValues[13]=mtg*12;
 thirdFooterValues[13]=Math.round((sum/(mtg*12))*100)+"%";

  var secondaryFooter = $(api.table().footer()).find('.secondary-footer');
  if (secondaryFooter.length === 0) {
    secondaryFooter = $('<tr align="center" class="secondary-footer"></tr>').appendTo(api.table().footer());
  }
  secondaryFooter.empty(); // Clear existing content
  secondaryFooterValues.forEach(function(value) {
    $('<td>').html(value).appendTo(secondaryFooter);
  });
  var thirdFooter = $(api.table().footer()).find('.third-footer');
  if (thirdFooter.length === 0) {
    thirdFooter = $('<tr align="center" class="third-footer" style="font-size:16px;font-weight:bold;color:red"></tr>').appendTo(api.table().footer());
  }
  thirdFooter.empty(); // Clear existing content
  thirdFooterValues.forEach(function(value) {
    $('<td>').html(value).appendTo(thirdFooter);
  });

},"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
          $('td', nRow).eq(0).css('color', 'blue');
        },


        dom: '<"top"B>rt<"bottom"><"clear">',

        "buttons": [
       {
       extend: 'excelHtml5',
       exportOptions: {
         rows: function(idx, data, node) {
                      return true; // Export all rows
                  },
           columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
       }
   },
   {
       extend: 'pdfHtml5',
       exportOptions: {
           columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
       }
   }
 ],

    } );

//when i export as excel document footers does not add into document...assist with this..

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

assist with this..

Looks like you forgot to include "please".

What version of Buttons are you using? With 3.0.1 this should export the footer. If you are using an earlier version, add footer: true to your export button definition.

Allan

AjithkumarT

Hi allan,thanks for reply ..this is my first post,i will correct Syntax highlighting in future..
i have tried footer: true but it did'nt work..

allan

If you could create a test case or link directly to your page, I'll take a look at what is going wrong.

Allan

AjithkumarT

Thanks,i used below code footer works. but secondaryFooter and thirdFooter did'nt export.
dom: 'Brtip', "buttons": [ { extend: 'excelHtml5', footer: true, action: function (e, dt, node, config) { $.fn.dataTable.ext.buttons.excelHtml5.action.call(this, e, dt, node, config); } }

kthorngren

Datatables 1.x doesn't support exporting multiple footer rows. See this thread. Datatables 2.0 and buttons 3.x multiple footer rows can be exported. See this example:
https://live.datatables.net/yeximube/1/edit

Assuming you have DT 1.x can you upgrade to 2.0? Use the Download Builder to get the new versions. There are changes so you will need to test. See this post with links to 2.0 information and upgrade notes.

Kevin