CSS classes

nlaslett

How does the styling work? I've gone through the CSS files and there are some classes that are not documented.

* What are all the "_example" IDs under the "General page setup" heading? Are those just for the examples? The heading implies a wider use.

* What is the "table.display" class? My tables don't format correctly without it, yet it is not automatically added. I would expect something like "dataTables_display" to be automatically added.

* You implement a number of classes with generic names (.top, .bottom, etc.). These don't fit your "dataTables_" format and could easily step on preexisting classes (unrelated to dataTables).

I've hacked my own version of the style sheet but want to make sure I'm not messing up anything.

Thanks,
Neil

allan

Hi Neil,

Possibly the best way to figure out the styling is to use Firebug and just poke around :-)

1. If you look at my example .html files you'll find that there is a dt_example id on the body - so yes this is just a general page set up to make it look nice and position things where I want.

2. I've added the class name "display" to my example tables just to separate them out from "regular tables" (not that my examples use any - but separate at this level seems good - it would probably confuse people if all their tables started getting DataTables styling!). It's just a case of getting the class name (if any) that you want.

3. Yup I know :-(. I'm planning on making the class names customisable at initialisation time to tidy things up. Now that I've done it this way, I'll break backwards compatibility if I just change them. It needs some consideration.

Hope this helps!
Allan

nlaslett

Thanks for the detailed feedback! I love the idea of being able to customize (or override) the class names. That's a great way to preserve backward compatibility if you change the default class names. My only other suggestion would be to automatically add a "dataTables_display" class to the table on initilization - just to keep me from having to remember to manually apply the class.

(While I like the idea of being able to use a generic class="display" as the jQuery selector for invoking dataTables, I prefer to manually call out my column data types, meaning I need to use a specific ID and invoke each table separately.)

Thanks,
Neil

allan

Hi Neil,

If you want a selector for the table without needing to add a custom class to the table you could just use:

[code]
div.dataTables_wrapper table {
border: 3px solid blue; /* etc */
}
[/code]

DataTables puts your table in a div with the class of "dataTables_wrapper" which is how this works.

Allan