Edit row and column in table header which has multiple rows

Karl_S

I am just not finding this. Probably due to me thinking the wrong way...

I have a table with 2 Header rows. The first row has 5 cells with the column titles. The second row has 2 cells using colspan of 2 and 3. I want to dynamically update the second cell of the second row.

If it was 1 row I know I would use
$( api.column( 2 ).header() )
but no matter what I have tried I have not been able to figure out how to get the second header row.

Regards,
Karl S

kthorngren

Maybe you can use a jQuery selector like this:
$("#example thead tr:eq(1) th:eq(1)")

Kevin

Karl_S

I am using a modified version of the sample on the Footer Callback example so it is inside

        $(document).ready(function() {
            $('#' + myID).DataTable( {
                "footerCallback": function ( row, data, start, end, display ) {
                    var api = this.api(), data;
         ... (define myText) ...
                    // Update header
                    $( api.column( 2 ).header() ).html(
                        myText
                    );
                }
            } );
        } );

Which is nestled inside a for loop where myID is defined to display multiple tables. So I tried chaning the api.column(2).header line (line 7 above) to the following with no luck:

$( api.cell(  $('#' + myID + 'thead tr:eq(1) th:eq(1)') )).html(

I have tried .column instead of .cell as well.

kthorngren

The Datatables APIs won't work with the header row. This example uses jQuery to update the 2nd header in the 2nd row:
http://live.datatables.net/tipalobi/1/edit

$("#example thead tr:eq(1) th:eq(1)").html('updated');

You should be able to do something similar in your footerCallback. If you can't get it to work can you put together an example of what you are trying to do?

Kevin

Karl_S

That did it. Thank you, Kevin. I replaced the 3 lines

            $( api.column( 2 ).header() ).html(
                myText
            );

with the single line

$('#' + myID + ' thead tr:eq(1) th:eq(1)').html(myText);

and the text is going in the correct place.