Updating complex table header text

Keith_H

I have a table which is similar to your complex header example. https://datatables.net/examples/basic_init/complex_header.html, i.e. columns with rowspan at the beginning then some colspan headers on row 1 and then the other headers below.

I am trying to update the TH elements which have colspan set on them, but I can't see how this done.

I've tried direct jquery with no luck.

Based on your example, how would I update the the TH which has a value of "HR Information" to a different value?

Thanks.

rf1234

$('th:contains("HR Information")').text("bla");

kthorngren

You can go to the console of that example and paste this in to see the change to the header:

$('#example thead tr:eq(0) th:eq(1)').text('My Info');

Kevin

rf1234

Sorry, I am pretty sure you may not use quotes with "contains".

So it should be like this:

$('th:contains(HR Information)').text("bla");

Here is an example of something more complex if you want to make sure you get something but not something that does contain other keywords as well:

I use this to identify the right Editor field label to attach a tooltip:

....
$('label:contains(keyword):not(:contains(otherWord)):not(:contains(yetAnother)):not(:contains(stillmore))'). ...

Keith_H

I can update via the console on your example page, but my table won't.

I have created an example : http://live.datatables.net/sotibuqu/1/edit

If I type $("#example thead tr:eq(0) th:eq(1)").text('Col 1'); into the console, nothing happens.

Thanks.

colin

It's doing something here: http://live.datatables.net/delunuma/1/edit !

Colin

Keith_H

Yes, I get that too on our intranet.
What this seems to be doing is inserting another thread row, as you end up with 3 rows in the header and not updating the existing thead info.

What I am trying to do is to update the text in the thead/th and change the 'Week n' text to show the actual ISO week number and the start date. But I can't seem to update any of the th values.

kthorngren

The Datatables scrolling features change things as Datatables duplicates the header and hides the original head and displays the duplicate. Use the browser's inspect tool on the head and you will see a table without an ID. Below that is a new div with the original thead where the rows have a 0px height. Colin's example is updating this header and causing the issue you see.

You will need a selector that finds the duplicated header. For example:
http://live.datatables.net/delunuma/5/edit

Kevin

Keith_H

That's great.

Thanks