JQuery DataTables and onClick image in Header

Question

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>

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

I'm not sure if that's what you want but you use this

Example JS :

$(document).ready( function() {
  $('#example').dataTable( {
    // you can use another callback if you want
    "fnInitComplete": function(oSettings, json) {
      $("#qa_one_t").on('click',function(){
          alert('click fire on img !');
      });
    }
  });
});

Note

in your js code you have :

[...]<span id='qa_one><img id='qa_one_t'[...]

missing ' in order to have : <span id='qa_one'>

it could solve the problem. Is it helped you?

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 24, 2013 at 18:44

Olivier Albertini

7142 gold badges7 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2353007 Over a year ago

I actually have both single quotes in my code, not sure how it got removed. I'm going to read up on the link you posted and see if it helps.

user2353007 Over a year ago

It did not help, the problem is that DataTables hijacks the entire cell.

Olivier Albertini Over a year ago

What do you mean by "hijacks the entire cell" ?

Collectives™ on Stack Overflow

JQuery DataTables and onClick image in Header

EDIT

1 Answer 1

Example JS :

Note

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

EDIT

1 Answer 1

Example JS :

Note

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related