get id (CSS) on complex headers using rowspan and colspan

madmike

Hello,

Using the following code on click, to get the table header column CSS id (second thead tr th)

var pos = oTable.fnGetPosition( this );
var pos_row = pos[0];
var pos_col = pos[2];
var col_header = oTable.column( pos_col ).header();
var col_id = $(col_header).attr('id');

If I click first column of the data grid, i receive "b-col2-a", but how to obtain upper tr th CSS id corresponding ("a-col2") ?

<table>
    <thead>
        <tr>
            <th rowspan="2" id="Name">Name</th>
            <th colspan="2" id="a-col2">col 2</th>
            <th colspan="2" id="a-col3">col 3</th>
        </tr>
        <tr>
            <th id="b-col2-a">sub col b1</th>
            <th id="b-col2-b">sub col b2</th>
            <th id="b-col3-a">sub col b1</th>
            <th id="b-col3-b">sub col b2</th>
        </tr>
    </thead>
...

Thanks for your help

madmike

I feel alone, no ideas ???

glenderson

Sorry that you feel alone.

I could suggest other ways of doing this so you don't have to grab the ID of the top row. For instance, when constructing the 2nd header, add an attribute data-firstID="..." the ID of the first row.

Then, your on click event would be something like this.
myID = $("#mytableID").columns($(clickedObject).closest("td").index()).header()).attr("data-firstID");

allan

This isn't something that DataTables itself presents an API for, so either you'd need to just jQuery/DOM to traverse the header cell or using something like glenderson suggests.

Allan