Add a Class to Row based on external Input
Add a Class to Row based on external Input
Hello,
I've skimmed the first few pages of the forums (and some extensive Google searching) and I did not come across anything to guide me to a solution. I've been mucking around with this idea for over a week...
My problem is simply the following:
I would like to have an HTML input reside directly above the "Results" column.
When a user types a number into the textbox, the datatable should add a class to each row that has a Result larger than the users number.
For example:
http://live.datatables.net/okuden/2
(Yes it's a class, multiple tables on one page and the "filter" should only apply to the one table its attached to)
If I were to type 22 in the input, rows (0 based) 4, 7, 8 and 9 would have some sort of Class applied to them. So the HTML would look similar to:
[code]
Acidity
23.9
...
[/code]
I was looking at this:
http://www.datatables.net/release-datatables/examples/plug-ins/range_filtering.html
But since it's a filter it hides rows... I need the rows to stay visible and have a Class applied to them instead.
I've read from this blog (http://www.ennazk.com/jquery-datatables-custom-functions/#.UbDcidimVU4) how to attach functions, but I don't know how to hook into tablesorting/filtering.
I'm just looking for some direction... and this seems like it should be relatively trivial :(
Thanks!
I've skimmed the first few pages of the forums (and some extensive Google searching) and I did not come across anything to guide me to a solution. I've been mucking around with this idea for over a week...
My problem is simply the following:
I would like to have an HTML input reside directly above the "Results" column.
When a user types a number into the textbox, the datatable should add a class to each row that has a Result larger than the users number.
For example:
http://live.datatables.net/okuden/2
(Yes it's a class, multiple tables on one page and the "filter" should only apply to the one table its attached to)
If I were to type 22 in the input, rows (0 based) 4, 7, 8 and 9 would have some sort of Class applied to them. So the HTML would look similar to:
[code]
Acidity
23.9
...
[/code]
I was looking at this:
http://www.datatables.net/release-datatables/examples/plug-ins/range_filtering.html
But since it's a filter it hides rows... I need the rows to stay visible and have a Class applied to them instead.
I've read from this blog (http://www.ennazk.com/jquery-datatables-custom-functions/#.UbDcidimVU4) how to attach functions, but I don't know how to hook into tablesorting/filtering.
I'm just looking for some direction... and this seems like it should be relatively trivial :(
Thanks!
This discussion has been closed.
Replies
How about a trivial bit of jQuery? :-)
[code]
$('tr>td:nth-child(3)').each( function () {
if ( this.innerHTML > value ) {
$(this).addClass( 'highlight' );
}
else {
$(this).removeClass( 'highlight' );
}
} );
[/code]
Allan
Works like a charm, thank you Allan!