Getting the gray header and footer to show up...

jeffrey_c_davis

Hello:
I'm new to DataTables and I'm trying to figure out how to get the gray header and footer to appears like it does at this link:
http://www.datatables.net/release-datatables/examples/basic_init/themes.html

It seems like my regular DaaTables don't have this. I think I need a background image like
ui-bg_highlight-soft_75_cccccc_1x100.png
but I don't see how to implement it. I'm a beginner to his. Please help.

allan

Hi,

Welcome to the DataTables world :-).

The example you linked to uses jQuery UI ThemeRoller files to format the display of the table. Themes for ThemeRoller can be created using the jQuery UI site: http://jqueryui.com/themeroller/ .

In terms of DataTables, what you need to do is:

1. Set bJQueryUI : true
2. Use the jquery.dataTables_themeRoller.css stylesheet (it includes a few styles that aren't available in the default ThemeRoller files, specific to DataTables).

And that should be around about it, ending up with an example like in the link to posted.

There are alternatives to ThemeRoller - Bootstrap for example is very popular now: http://datatables.net/blog/Twitter_Bootstrap_2 and I have integration files available for Zurb Foundation in the DataTables plug-ins repository.

In terms of styling DataTables it is really just about setting up the CSS to match the style that you want. There is a blog post detailing how you can completely customise the table here: http://datatables.net/blog/Creating_beautiful_and_functional_tables_with_DataTables

Regards,
Allan

GregP

Just an additional note: using jQuery UI should be functional out of the box, but at the end of the day it's all just CSS. After rolling a jQuery UI theme and enabling it for DataTables, I found I had to make a few changes to get it "just right".

All possible, since it's just CSS!

In terms of organizing things, I would keep a separate section of your site/application's main CSS file (which would ideally be loaded AFTER the jQuery UI CSS file) for "overrides". Then if you roll a different theme, your customizations should stick, rather than having to copy+paste changes into the new jQuery UI CSS file.

jeffrey_c_davis

This still doesn't quite work. I want the gray background image that is displayed where it says "Show 10 entries" on the left upper corder, and "Search" on the right upper corner. There should be a gray background image right underneath the Show 10 entries and the search box. I'm missing the gray background image. Here is the code:










$(document).ready(function(){
$('#the_table').dataTable
({
"bPaginate": true,
"sScrollY": "200",
"bScrollCollapse": true,
"bStateSave": true,
"bJQueryUI": true,
"bAutoWidth": false,
"bFilter": false
});

});









Artist / BandAlbumSong



Muse
Absolution
Sing for Absolution

Primus
Sailing The Seas Of Cheese
Tommy the Cat

Nine Inch Nails
Pretty Hate Machine
Something I Can Never Have

Horslips
The Táin
Dearg Doom



<!-- PLACE MORE SONGS HERE -->

GregP

Unfortunately, the code doesn't help much because it'll be the rendered code that matters (seeing if jQuery UI styles are added, etc).

I forgot to mention that if you're using jQuery UI, you also need to set your sDom parameter differently. Look up sDom in the API reference and it will show you jQuery UI versions.

allan

@jeffrey_c_davis - It looks to me like the only thing missing is the ThemeRoller inclusion. You can do that with something like this:

[code]

[/code]

That's the jQuery UI 1.10.1 default theme. If you want to use a different theme, then of course you should use your custom ThemeRoller file.

This example shows your page rendered (with the `` line form above (click the 'Render' button to see it live):
http://live.datatables.net/iyegon/edit#javascript,html

@Greg

> I forgot to mention that if you're using jQuery UI, you also need to set your sDom parameter differently.

Good point, but only if you specify sDom in the initialisation. If not a suitable default will be used as is the case error.

Regards,
Allan