How can I add custom HTML attributes to the header column?

mats

Hello,

I'm very interested in adding annotations and tooltips for columnar data. I have a table with a large amount of columns that I'm trying to update with descriptive tooltips. Is there an easy way to do this without adding extra data to the table cells?

Thanks,
Matt

mRender

https://www.datatables.net/examples/basic_init/complex_header.html

Just make a header that includes some information if you want to go the easy route.

mats

Thanks for your reply!

Some of the descriptions are rather long and wouldn't fit in a normal table layout. I was hoping to use the javascript pattern where I pass in a data and columns json. I can't see an easy way to add a title attribute to use with a jquery tooltip plugin.

Mytko

Hi. You can try something like this:

1. Add custom option "tooltip" into column definition.

"columns": [
  {"tooltip":"Tooltip text", ...},
  ...
],

1. In header callback you can read custom option and write it into a header.

"headerCallback": function( nHead, aData, iStart, iEnd, aiDisplay ) {
  table.columns().iterator('column', function ( settings, column) {
    if (settings.aoColumns[ column ].tooltip!== undefined) {
      $(table.column(column).header()).attr('title', settings.aoColumns[ column ].tooltip);
    }
  }); 
},

1. Initialize tooltip

$('thead th[title]').tooltip({  "delay":0, "track":true, "fade":250});

mats

Hi Mytko,

Thanks for the idea!

I'm having some performance issues with callbacks because my dataset has many columns. What I've been doing so far is generating the html structure and passing in the table data via JSON. This way I have the thead elements generated beforehand and the columns contain the custom attributes.

Good