Tablesorter How to update table header values

Question

I am using Motties tablesorter table, which works like a charm. Now I need to update the column headers dynamically and optionally the tables contents. Update the content works fine. How I would update the table header text of a tablesorter table ? This is how I update the table2 contents:

var $table = $('#table2');
$.tablesorter.clearTableBody( $table[0] );
$("#table2 tbody").append(data);
var resort = true;
$("#table2").trigger("update", [resort]);

How would I update the table header only ? I thought I could do this way :

var headers= ["Banana", "Orange", "Apple", "Mango"];
$('table2 thead').html('<tr>' + headers + '</tr>');

but it does only append a new header on top of the header line.

Update: OK here is what I did so far to update the header completely:

var hdr = new Array("Banana", "Orange", "Apple", "Mango");
var i =0;
$("#table2 thead th").each(function () {
$(this).text(hdr[i])
i++;
})

Answer 1

If you're updating the headers only to change the content of the header, then use updateHeaders.

If you're adding or removing columns, use updateAll; but this method has proven to be unreliable if overly used. The best solution in this case would be to destroy the tablesorter instance and re-initialize it.

Answer 2

That would be the answer to update all column headers. The combination 'thead th' was solution to update the correct header.

var hdr = new Array("Banana", "Orange", "Apple", "Mango");
var i =0;
$("#table2 thead th").each(function () {
$(this).text(hdr[i])
i++;
})