CODEWITHSUNDEEP
jquerydatatables
thomasdclark
thomasdclark

Reputation: 484

Directly adding footer in JQuery DataTable

I want to directly add a footer to a JQuery datatable, just like I would for the body of the table using the dt.row.add() method. How is this possible without using the footer callback method?

Thanks.

Upvotes: 3

Views: 22538

Answers (4)

Nelson
Nelson

Reputation: 21

In the DataTables Forum I found this solution and it works for me:

$.fn.createTable = function() {
              $(this).append("<tfoot><tr><th></th><th></th></tr></tfoot>");
              return this.DataTable( {
                                        data     : dataSet,
                                        "scrollY": 400,
                                        "scrollX": true,
                                        "paging" : false,
                                        "info"   : false,
                                        fixedHeader: {
                                            header: true,
                                            footer: true
                                        },        
                                         "footerCallback": function ( tfoot, data, start, end, display ) {
                                            $(tfoot).find('th').eq(0).html( "Hello Word");
                                        }        
                                    } );
                            };
// Ejecutar función
$('#'+idTabla).createTable();

Upvotes: 1

BlackPearl
BlackPearl

Reputation: 2795

This is how I achieved it without the footer call back

HTML

<table data-toggle="data-table" class="table compact" cellspacing="0" id="dt">
    <thead>
      <tr>
        <th>S/N</th>
        <th>Name</th>
        <th>Class</th>
        <th>Term</th>
        <th>Session</th>
        <th>Date</th>
        <th>Amount</th>
        <th>Status</th>
      </tr>
     </thead>
     <tfoot>
       <tr id="tfooter">
       </tr>
     </tfoot>
     <tbody id="payment">
     </tbody>
</table>

JavaScript

 var dt = $('#dt').dataTable().api();
 $.each(resp.payments, function (key, value) {
    //add data from server via ajax
       dt.row.add([ ]);
 });

 //add tfoot
   $('#tfooter').append(
      '<th colspan="6"><strong>TOTAL</strong></th>'+
      '<th colspan="2"><strong>&#8358;'+ total +'</strong></th>'
    );

//then redraw
  dt.draw();

Upvotes: 1

faheem farhan
faheem farhan

Reputation: 411

DataTables doesn't automatically generate a TFOOT. You need to do it explicitly using DOM, javascript, jquery etc. Then initialize dataTable.

document.getElementById('example').createTFoot().insertRow(0);
var dTable = $('#example').DataTable();
$(dTable.table().footer()).html('Your html content here ....');

Upvotes: 1

Gyrocode.com
Gyrocode.com

Reputation: 58930

DataTables doesn't seem to have a API to add a footer dynamically, if that's what you want. It checks for presence of <tfoot> element during initialization only.

To add a footer dynamically:

  1. Destroy the table with destroy().

    $('#example').DataTable().destroy();

  2. Append <tfoot><tr><th></th></tr></tfoot> to the <table> element making sure you're adding as many <th></th> elements as there are columns in the table.

  3. Re-initialize the table with the same options:

    $('#example').DataTable({ /* your options here */ });

Upvotes: 5

Related Questions