jquery.dataTables_themeroller.css questions
jquery.dataTables_themeroller.css questions
resnbl
Posts: 3Questions: 0Answers: 0
As a n00b with respect to CSS, I appreciate the help that a "base" .css file gives. However, I have some questions:
I take it that ".dataTable" is supposed to be the class of the table element, and replaces the ".display" label used in the demos. I'm fine with it being different than the demo .css, but ".dataTable" is easily confused with the ".dataTables_xxx" classes assigned by default to other elements. Also, in the real world, when ".dataTable" needs to be replaced, guess what happens when you use an editor to perform a global change of ".dataTable" to ".userTable" -- all the ".datatables_xxx" selectors are incorrectly altered as well. I would suggest using a name as simplistic as ".myTable" or even ".myTableClass" if you really want to highlight this is as a user-defined field.
My second question relates to the ".DataTables_sort_wrapper" and ".DataTables_sort_icon" classes: is there some reason these are capitalized differently than all the other class names? The CSS standard is case-insensitive, but the XHTML standard is not. (This isn't strictly a 1.9 issue, but if you were to make a change, this wold seem like a good time...).
My last question relates to the ".paginate_xxx" definitions: are these actually used in a jQuery-ui themed app? I know the background images are supplied by jQuery-ui, not these defined here. (I haven't tried full-number pagination, so maybe they are only needed then?)
Again, I appreciate the effort, but as someone for whom using DataTables is their first effort with a product which generates HTML/CSS, keeping things as pared down as possible is a real help when debugging my own work.
I take it that ".dataTable" is supposed to be the class of the table element, and replaces the ".display" label used in the demos. I'm fine with it being different than the demo .css, but ".dataTable" is easily confused with the ".dataTables_xxx" classes assigned by default to other elements. Also, in the real world, when ".dataTable" needs to be replaced, guess what happens when you use an editor to perform a global change of ".dataTable" to ".userTable" -- all the ".datatables_xxx" selectors are incorrectly altered as well. I would suggest using a name as simplistic as ".myTable" or even ".myTableClass" if you really want to highlight this is as a user-defined field.
My second question relates to the ".DataTables_sort_wrapper" and ".DataTables_sort_icon" classes: is there some reason these are capitalized differently than all the other class names? The CSS standard is case-insensitive, but the XHTML standard is not. (This isn't strictly a 1.9 issue, but if you were to make a change, this wold seem like a good time...).
My last question relates to the ".paginate_xxx" definitions: are these actually used in a jQuery-ui themed app? I know the background images are supplied by jQuery-ui, not these defined here. (I haven't tried full-number pagination, so maybe they are only needed then?)
Again, I appreciate the effort, but as someone for whom using DataTables is their first effort with a product which generates HTML/CSS, keeping things as pared down as possible is a real help when debugging my own work.
This discussion has been closed.
Replies
Good questions - the new jquery.dataTables.css and its ThemeRoller compatible counterpart will be the topic of a future blog post as I continue o the 1.9 development path, but basically the intention is for these two new files to replace my demo_table.css file. It was clear that a lot of the time developers were just including that demo_table file into their page, and it really wasn't designed for compatibility with pages other than my demos. Hence the creation of nice clean templates - also makes it easier to understand what is needed for customisation.
In 1.10 development I'll be removing demo_table.css and replace it with an include of the new files and a new examples.css file which will include my extra CSS needed for the demos.
Regarding the 'dataTable' class - this is partly to go with a new feature in 1.9 - this class will be automatically added to tables that have $().dataTable() run on them. Its to try and provide a little namespacing and not require too much customisation of the HTML.
In terms of the naming - you are quite correct that this is really not great at the moment. With the extras we've been starting a new naming scheme which is {namespace}_{type}_{specific} (for example "DT_Table" or "DT_Paginate_Next" etc). This will be introduce in future to DataTables, but I've not done it just now because I don't want to break backwards compatibility (indeed, even when I do make the change I'll provide full instructions for how to use the old method).
> My second question relates to the ".DataTables_sort_wrapper" and ".DataTables_sort_icon" classes: is there some reason these are capitalized differently than all the other class names?
A legacy error :-(. No there is no reason I'm afraid, other than I picked that once, and its suck. When I do my full renaming, everything will be made consistent.
> My last question relates to the ".paginate_xxx" definitions: are these actually used in a jQuery-ui themed app?
No - you are quite correct, they are not used. One or two are (such as "paging_two_button" for the container) but the majority are not and could be removed form that file, which I will add to the list to do. Thanks for flagging that up.
I'm afraid you've hit on what I think is the weakest point of DataTables as it stands at the moment - the CSS! The two new files try to some extent to help the situation, but I think it will take another major release or two before I'm properly happy with it.
Regards,
Allan
One functionality request: the CSS specifies to use the pointer cursor for all TH elements. This produces unintended results when columns are flagged as non-sortable and can lead to support issues when naive users expect a click with a pointer cursor to have some effect. Maybe you can expand one of the sorting example pages to show how to revert the cursor to "auto" for non-sortable columns?
PS: love the "liquid width" tables in 1.9!