Custom Header Information

kronarq

I am trying to figure out a way to place content in the top header area of a DataTables table. I am using DataTables to display a directory listing and would like to have the path listed in there.

Here is an example of what I am trying to do:
http://img43.yfrog.com/i/dtexample.png/

I have spent hours searching through the documentation and forums, but i was unable to find any information on this. Any help would be greatly appreciated.

allan

Hi kronarq,

Interesting question! There isn't actually a specific method which is intended to do exactly what you are looking for, however there is a way to do it... Since you don't have the 'length menu' in your image, what you could do is use the language string for it to put in your text. For example:

[code]
$('#example').dataTable( {
"oLanguage": {
"sLengthMenu": "Example.com/wiki"
}
} );
[/code]
An alternative option would be to use sDom to insert a DIV with a specific class and use the CSS "content" property to put your text into place ( http://www.w3schools.com/Css/pr_gen_content.asp ). The problem with this one is that IE6/7 will not work with it.

Regards,
Allan

kronarq

I got it working. Thank you for your help.

pthaden

I got something to work, but not sure if it's the best way to do this:

Leveraging jQuery's .prependTo() and .appendTo() methods, it's possible to shove some html code inside of a div if you can select it by ID. Using Firebug, I found my rendered table had divs in the header with id="myTableID_length" and id="myTableID_filter".

I wanted to stick a drop-down menu into the header next to the search field that would call a function to fnFilter my table by predefined criteria. I stuffed the code with the javascript call and s in-between two tags (because a didn't render right the first time), and then gave the an ID of "myMenu".

Then I put this call inside of my $(document).ready function, right after initializing the dataTable:

[code]$('#myMenu').prependTo($('#myTableID_filter'));[/code]

This stuffed the span into my table's header right in front of the Search box. Love to hear if there's a better way, but it seems to run correctly in the browsers I've checked so far.

thanks,
-paul