highlight of the lines

mfeske

Hi, I'm using version 1.9.2 and version 1.7.2 of DataTables from JQuery. I would like to implement the example with the highlight of the lines. http://www.datatables.net/release-datatables/examples/advanced_init/highlight.html jqeury and datatables is used seemingly, but the highlight of the line is not working. What could be the. The URL is http://allmendeweg.de/spielwiese/tabelle.php

allan

Hi,

I don't actually see the highlighting code on your page? I'm also getting errors showing in my browsers console:

> [Error] [Report Only] Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback. (tabelle.php, line 12, x2)

Allan

mfeske

Helo Allan,

thanks for your answer. Can you help me, what does it mean ?!
In my /spielwiese/js/DataTables-1.9.4/media/cssdemo_table.css is the code:
/*
* Row highlighting example
*/
.ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
background-color: #ECFFB3;
}

.ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
background-color: #E6FF99;
}

.ex_highlight_row #example tr.even:hover {
background-color: #ECFFB3;
}

.ex_highlight_row #example tr.even:hover td.sorting_1 {
background-color: #DDFF75;
}

.ex_highlight_row #example tr.even:hover td.sorting_2 {
background-color: #E7FF9E;
}

.ex_highlight_row #example tr.even:hover td.sorting_3 {
background-color: #E2FF89;
}

.ex_highlight_row #example tr.odd:hover {
background-color: #E6FF99;
}

.ex_highlight_row #example tr.odd:hover td.sorting_1 {
background-color: #D6FF5C;
}

.ex_highlight_row #example tr.odd:hover td.sorting_2 {
background-color: #E0FF84;
}

.ex_highlight_row #example tr.odd:hover td.sorting_3 {
background-color: #DBFF70;
}

Must I do more for the effect?

Greetings
Micha

allan

I'd remove the `.ex_highlight` part of that selector since that what is stopping the row highlighting working at the moment.

The CSS that DataTables 1.10 uses will be much cleaner! :-)

Allan

mfeske

Allan, thanks for your answer. Sorry for my bad english, but what must I do?

allan

Remove the `.ex_highlight` part of the CSS selector.

mfeske

oh allan, for kids :-( where is the CSS selector ?

tangerine

.ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
background-color: #ECFFB3;
}

That's a CSS selector. It is "selecting" some HTML elements in the ".ex_highlight" class and the "#example" table.

mfeske

Hello tangerine, thanks for your answer. I remove line 498 to 540 in demo_table.css but highlightning is not working :-(

mfeske

the live example isnt working to :-( see http://allmendeweg.de/spielwiese/js/DataTables-1.9.4/examples/advanced_init/highlight.html

allan

Replace the CSS you pasted above with:

[code]
#example tbody tr.even:hover, #example tbody tr.even td.highlighted {
background-color: #ECFFB3;
}

#example tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
background-color: #E6FF99;
}

#example tr.even:hover {
background-color: #ECFFB3;
}

#example tr.even:hover td.sorting_1 {
background-color: #DDFF75;
}

#example tr.even:hover td.sorting_2 {
background-color: #E7FF9E;
}

#example tr.even:hover td.sorting_3 {
background-color: #E2FF89;
}

#example tr.odd:hover {
background-color: #E6FF99;
}

#example tr.odd:hover td.sorting_1 {
background-color: #D6FF5C;
}

#example tr.odd:hover td.sorting_2 {
background-color: #E0FF84;
}

#example tr.odd:hover td.sorting_3 {
background-color: #DBFF70;
}
[/code]

i.e with the part I suggested you remove, removed :-)

Allan

mfeske

Yipea !!! Hurra !!! it works :-) Thanks a lot for this good job.

mfeske

Can you help me maybe with another porblem yet? I read the data from a database and would, for example, in a field where a 1 is the background color to change red and in a field in which a 2 is green. Do I need to do the same thing in CSS?