21st Oct 2011ThemeRoller - how would you add a title centered between the search and the show entries
I did it a bit differently. I have a whole function that grabs a title and moves it into place. The reason I did this is because although I don't care if the title is visible as an H2 "pre-render", I simply want to maintain -titles- as titles. As in, from within my HTML. So to start with I have my markup:
[code]
My Title
....
[/code]
[code]
...
fnDrawCallback : function(oSettings) {
// other stuff
titleSwap(this); // because 'this' is the table jQuery object already
}
...
[/code]
And the function itself:
[code]
function titleSwap(obj) {
var containerObject = obj.closest('.tableContainer'), // goes up the DOM tree to find the container div
headingObject = containerObject.children('h2'), // goes back into the tree to find the header
toolbarObject = containerObject.find('.ui-widget-header').first(); // finds my toolbar header. I use jQuery UI so .ui-widget-header was a handy class to grab. You're using jQuery UI, too, so you're good!
toolbarObject.append(headingObject); // move the H2 (the whole thing, not just its contents) into the table's header
}
[/code]
And of course to get it to appear properly, some CSS will be required. Note on CSS: I might be missing styling on another element that affects this. I've customized things here and there and I don't have a mental inventory of what's different vs. DT's CSS as well as jQuery UI's CSS. But the general idea is this:
[code]
/* avoid FOUC while AJAX fetch is taking place */
.tableContainer h2 {
display:none;
}
/* center that mutha! */
.ui-widget-header h2 {
display: block;
text-align: center;
}
[/code]
Is it a lot of work just to do this? Probably. But now as our application moves forward, the markup makes semantic sense. Our tables are not just widgets within a page, they are the basis of each page that they appear in. The table header is effectively the header for the information for the whole page; they could even be h1 and be semantically sensible.
If anybody ever needs to update a table's title, they can intuitively and naturally see that it's in the markup; they don't need to dig through my initialization objects to find them.