Adding DataTable to table removed background color, left text color alone

ahall

Hi all,
I just found DataTable and it's proving very easy and useful. I have a couple internal webpages at work, displaying information in tables, and my boss has been asking me to make the tables sortable. I finally looked into it today, and after finding this plugin, my tables were sortable in about ten minutes!

There's one problem I'm having, though. The main webpage where I'm applying this shows a table of requests. Staff can approve a request, own it (to indicate to other staff that this user has it covered) or both. When a request is not approved, it has a red background with light red text; when it is owned and unapproved, it has a yellow background with black text; when it is approved, owned or not, it has a dark green background on light green text. Some requests are informational and don't need approval, and these are gray.

Here's the problem. The moment I enabled DataTable, my text colors stayed the same, but my rows all got a white background. I don't know why this is happening, especially since my text didn't change color. I'm guessing DT applies a default background color, but I don't know how to tell it not to. I like the lines between rows, but I want my own colors to override whatever DT does.

In case it matters, you should also know that this page is heavy on ajax. The table itself is created inside the pages' backend file (written in PHP), then placed on the page. Whenever a user changes a request's status, there's no button to apply the change, it happens when the checkbox is clicked. The same PHP file that makes the whole table will get the data, update the database, then return a TR element that Jquery uses to replace the existing one. This is why colors are important to me; when a user approves a request, the row needs to turn green, and when a user is looking at all requests, it needs to be obvious which are not yet approved or owned.

My colors are assigned in CSS, not through style tags. In the PHP file that makes the table, I assign a class of "red", "green", and so on based on values found in the database row on which the current table row is based. My CSS simply defines what classes of various colors should look like.

Hopefully I'm making sense, and have given enough information. If anyone needs more details, let me know. Apart from this, my tables are working perfectly, so I'd love to get this final loose end tied up. Thanks for any suggestions.

allan

I'm guessing DT applies a default background color

Are you using the display class in your <table> tag? If so, remove it. DataTables will only use background colours if you add that.

Allan

ahall

I'm not. My table definition consists of only this:

<

table name='tbl_errors' id='tbl_errors'>

My script to enable DataTable is just this:

function makeDataTable(tableObject) {
//use DataTable to make our table of errors all fancy
tableObject.DataTable( {
paging: false,
searching: false
});
}

Later, I call that function a few times. My page loads the table a couple times, and reloads individual rows, as I mentioned in my first post. Thus, I need to call the function every time the table appears or, I think, has a row updated. Either way though, I'm not using any classes at all. Does DataTable need a class I'm missing?

ahall

Sorry! I was talking about the table, when it's the rows that are missing the background color. Here's the PHP that makes the row tag:
$tableRow .= "<tr data-error-id='" . $errorID . "'";
if(!$requiresAuthorization) { $tableRow .= " class='gray'"; }
elseif(!$errorIsOwned && !$errorIsAuthorized) { $tableRow .= " class='red'"; }
elseif($errorIsOwned && !$errorIsAuthorized) { $tableRow .= " class='yellow'"; }
elseif($errorIsAuthorized) { $tableRow .= " class='green'"; }
$tableRow .= ">

I then add cells to the row, but the row's class is what determines its color. Again, too, the text of the row is the right color, but the background of the row is now white.

allan

Perhaps you could link to the page so I can help to debug it please. Something is adding a background colour, and I can't say for sure what it is without being able to inspect the elements (right click on the cells and "Inspect element").

Allan

ahall

Sorry! I was talking about the table, when it's the rows that are missing the background color. Here's the PHP that makes the row tag:
$tableRow .= "<tr data-error-id='" . $errorID . "'";
if(!$requiresAuthorization) { $tableRow .= " class='gray'"; }
elseif(!$errorIsOwned && !$errorIsAuthorized) { $tableRow .= " class='red'"; }
elseif($errorIsOwned && !$errorIsAuthorized) { $tableRow .= " class='yellow'"; }
elseif($errorIsAuthorized) { $tableRow .= " class='green'"; }
$tableRow .= ">

I then add cells to the row, but the row's class is what determines its color. Again, too, the text of the row is the right color, but the background of the row is now white.I would, but it's an internal page that's not only login-protected, but only available on our internal network. I did inspect the element though, and the TR in question has just two classes: red and even.

I'm not very good with CSS precedence, but in DataTable's CSS, I do see that the tr of a DataTable gets a background-color of FFFFFF. Even is also colored in that CSS, but I don't think I have striping turned on. Still, could my CSS get applied, then overridden by yours? I load my CSS after the DataTable one, but would the order be confused since I'm loading this whole table with AJAX?

ahall

Well, I found a way around it, but I feel like it's a hack. I ended up going into my global.css file (included in all pages to style nav menus, define color classes, etc). I went to each definition for a color class and added "table.dataTable tr" to the list of selectors. My colors are a bit lighter than they were, but they're at least back. I suspect this is because I never used a tbody before, so now the white of that is behind my colors, and I never set alphas. Either way, the colors work again. Still, as I said, I feel like it's a hack around the problem and not a fix for whatever the real issue is.