JQuery DataTables and onClick image in Header

JQuery DataTables and onClick image in Header

I have a question mark inside the header of a table that uses JQuery
Datatables. I tried disabling sorting (which isn't ideal) but the onclick
event wont fire for my image.
Essentially DataTables hijacks the entire cell.
Does anybody know how I can get datatables to only use either text or a
span within the cell so I can still have my question mark with its onclick
event and also use DataTables for sorting?
I have this in the html head
$(function() {
$('#dcsales').dataTable(
{
"aoColumns": [
{ "bSortable": false },
null,
{ "bSortable": false },
null,
null,
{ "bSortable": false },
{ "bSortable": false }
]
}
);
});
I have this in the table header
<thead>
<tr>
<td><span id="qa_one"><img id="qa_one_t"
src="img/question.png"/></span>Col 1</td>
<td> Col Two</td> ...
</tr>
</thead>
using firebug, I can see that DataTables inserts a class into the td. I
would like to insert the generated class into a span with an certain class
so maybe my header cells will look like this.
<td><span id="qa_one"><img id="qa_one_t"
src="img/question.png"/></span><span class="datatables">Col 1</span></td>
I'm on their website reading the documentation and forum posts but can't
find any relevant information.



EDIT
Based on the following post Jquery datatable with checkbox in header and
in row:select all checkbox not working
which also led me to this http://datatables.net/usage/columns
I changed the script in the head section to the following and everything
from html
$(function() {
$('#dcsales').dataTable(
{
"aoColumns": [
{ "bSortable": false, "sTitle": "<span id='qa_one><img id='qa_one_t'
src='img/question.png'/></span><span>Col One</span>", "mDataProp":null
},
null,
{ "bSortable": false },
null,
null,
{ "bSortable": false },
{ "bSortable": false }
]
}
);
});
It didn't make a difference though, the html markup is generated correctly
but when I click on the image, the cursor clicks the entire cell.
here is what the generated markup looks like after the changes
<td class="sorting_disabled" tabindex="0" rowspan="1" colspan="1"
style="width: 142px;" aria-label="Col One">
<span id="qa_points">
<span>Type of Points</span>
</td>