CODEWITHSUNDEEP
jquerydatatables
sesshoumaru
sesshoumaru

Reputation: 167

jQuery dataTables - How to clone a header to create a footer

I am using JSON to create data for DataTable but also the header. However, I noticed the footer is not created. So I need to it manually. My idea is to clone the header to create the footer but I dont' know how to do it.

I'm using the following code :

$.getJSON("http://127.0.0.1/info", function( data ) {
  $(document).ready(function() {
$('#log').html( '<table class="display compact" id="log-data" width="100%"></table>' );

var table = $('#log-data').dataTable( {   
  "dom": '<"tblContainerT"T><"tblContainerTop"lf><rt><"bottom"ip>',
  "tableTools": {
    "sSwfPath": "/swf/copy_csv_xls_pdf.swf",
    "TableToolsInit.sTitle": "data-export".
  },
  "data": data['tbody'],
  "columns": data['thead'],
  "lengthMenu":[[25,200,500,-1],[25,200,500,"All"]],
  'fnInitComplete' : function () {
    $("thead tr").clone().appendTo($("tfoot tr")) ;
  }
});

new $.fn.dataTable.FixedHeader( table, {
      bottom: true
});

  });
});

The relevant part is the following :

  'fnInitComplete' : function () {
    $("thead tr").clone().appendTo($("tfoot tr")) ;
  }

It's not working so something is going wrong. Do you know how to do it ?

Let me know if you need more information.

Upvotes: 3

Views: 5005

Answers (1)

davidkonrad
davidkonrad

Reputation: 85598

It is hard to say when we dont know how your markup is.

If you have <tfoot></tfoot> only :

fnInitComplete : function() {
   $("thead tr").clone().appendTo($("tfoot")) ;
}

demo -> http://jsfiddle.net/gu5qvjag/

If you have <tfoot><tr></tr></tfoot> :

fnInitComplete : function() {
    $("thead tr th").each(function(i, th) {
        $(th).clone().appendTo($("tfoot tr"));
    });    
}

demo -> http://jsfiddle.net/uj5dpbua/

Update. Sad to say, overlooked that the <table> itself is generated by code too :( 

fnInitComplete : function() {
    $("#log-data").append('<tfoot></tfoot>');
    $("#log-data thead tr").clone().appendTo($("#log-data tfoot")) ;
}

Upvotes: 5

Related Questions