Using sDom to add a header bar is changing table styling.

kbeaty

First, I'm new at this so please excuse anything that is outrageously dumb.
When I use the sDom parameter in my table, the text added to the header bar and all the text in each cell (TD) is changed to white. Removing the SDom lines allows the table to revert back to the styling in my custome jqueryUI. Does anyone have any idea how to solve this. I have looked at the css styling in all the css files and can not find any conflicts. Any idea what I'm missing?

We are using the Lift web framework and the table is displayed inside a Lift surround statement.

Line 256 - ".ui-widget-header a { color: #ffffff; }" in jquery-ui-1.9.1.custom.css - is being activated to set the color, but I can not figure out why this css would be called simply because of the sDom parameter.

Note: we have other tables in this app that do not employ the sDom parameter and they are fine.

This is my code.



Home Page raceTracker.com

<!-- dataTables style sheets -->
<!-- jquery-ui-1.9.1.custom.css contains the custome styling for dataTables from JQueryUI -->






$(document).ready(function() {
$('#example').dataTable( {
"bPaginate" : false,
"bJQueryUI": true,
"sScrollY": "370px",
"bScrollCollapse" : true,
"bAutoWidth": false,
"sDom": '<"H"f<"toolbar"<"clear">>tr<"F"ip<"clear">>'
} );
$("div.toolbar").html('Select an event below');
} );
/* "sDom": '<"toolbar">frtip' */




Help or suggestions will be appreciated.

allan

Are you able to give us a link to the page in its 'broken' state? The basic idea looks okay to me using this:

> '<"H"f<"toolbar"<"clear">>tr<"F"ip<"clear">>'

Or is it the commented out one you are having problems with? You need to be aware that the sDom default is different depending on if jQuery UI is enabled or not since jQuery UI theming needs extra markup.

Allan

kbeaty

I am aware that using jQueryUI requires the H and F syntax. And sorry, the commented out line should have been removed. It was being used before we decided to use themerollers. I Can't give a link right now, but may be able to later today.

allan

Looking at this again:

> '<"H"f<"toolbar"<"clear">>tr<"F"ip<"clear">>'

There is a missing closing brace:

[code]

<
"H"
f
<
"toolbar"
<
"clear"
>
>
t
r
<
"F"
i
p
<
"clear"
>
>
[/code]

I'd guess its missing from the header?

Allan

kbeaty

Oooh, I hate making a rookie mistake and having to get help to solve it. But thanks, your right and I'll try this fix.

allan

No worries. sDom is a bit horrible in fairness. I'm thinking of providing an option to use it something like:

[code]
dom: [
[
{ className: "H" },
'filter',
[
{ className: "toolbar" }
],
[
{ className: "clear" }
]
],
'table',
'processing',
[
{ className: "F" },
'info',
'paging',
[
{ className: "clear" }
]
]
]
[/code]

A lot more verbose, but possibly more understandable? An array indicated a tag ('div' by default and could be changed to some other tag if needed).

Allan

kbeaty

The missing > was the problem. Many thanks.
IMO, being a bit more verbose is OK as it adds to clarity. It took me a while and reading a few of the forum comments before I began to understand.