Unable to highlight rows using jQuery plugin - DataTables

Hi,

I've been using the plugin, 'DataTables', and have just run into an issue with highlighting rows.  I've followed this example verbatim but my rows never highlight.  Is there any particular JS other than the initialization to get this to work.  I'm using IE8.

http://www.datatables.net/release-datatables/examples/advanced_init/highlight.html

Thanks,
Blue
blue44Asked:
Who is Participating?
 
Kyle HamiltonData ScientistCommented:
Hi,

The only thing I did is add the html header code - it works in IE8:

http://candpgeneration.com/EE/highlightRows.html
0
 
Kyle HamiltonData ScientistCommented:
post your page. without seeing what you've done, people can't help you.
0
 
blue44Author Commented:
<script type="text/javascript" language="javascript" src="http://www.datatables.net/release-datatables/media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="http://www.datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>

<script language="JavaScript">
	$(document).ready(function() {

		$('#lpcTable').dataTable( {
			"bJQueryUI": false,
			"bFilter": false,
			"bInfo": false,
			"bPaginate": false,
			"bSortClasses": true,
			"bAutoWidth": true
		}); 

	});
</script>

<style type="text/css">


/*
 * Table
 */
table.dataTable {
	margin: 0 auto;
	clear: both;
	width: 100%;
	
}

table.dataTable thead th {
	padding: 3px 18px 3px 10px;
	border-bottom: 1px solid black;
	border-right: 1px solid  #999;
	font-weight: bold;
	cursor: pointer;
	cursor: hand;
	font-size:10px;
	
	/*background-image:url(../images/table_header_grey.png);
	background-repeat:repeat-x; 
	height: 100%;
	width: 100%;*/
	/**/background-color:#ceced4;
}





table.dataTable tfoot th {
	padding: 3px 18px 3px 10px;
	border-top: 1px solid black;
	font-weight: bold;
}

table.dataTable td {
	padding: 3px 10px;
	font-size:10px;
	/*border-bottom: 1px solid black;*/
	border-right: 1px solid  #999;
}

table.dataTable td.center,
table.dataTable td.dataTables_empty {
	text-align: center;
}

table.dataTable tr.odd { background-color: #f7f7f7; }
table.dataTable tr.even { background-color: white; }

table.dataTable tr.odd td.sorting_1 { background-color: #D3D6FF; }
table.dataTable tr.odd td.sorting_2 { background-color: #DADCFF; }
table.dataTable tr.odd td.sorting_3 { background-color: #E0E2FF; }
table.dataTable tr.even td.sorting_1 { background-color: #EAEBFF; }
table.dataTable tr.even td.sorting_2 { background-color: #F2F3FF; }
table.dataTable tr.even td.sorting_3 { background-color: #F9F9FF; }








/*
 * Table wrapper
 */
.dataTables_wrapper {
	position: relative;
	clear: both;
	*zoom: 1;
}


/*
 * Page length menu
 */
.dataTables_length {
	float: left;
}


/*
 * Filter
 */
.dataTables_filter {
	float: right;
	text-align: right;
}


/*
 * Table information
 */
.dataTables_info {
	clear: both;
	float: left;
}


/*
 * Pagination
 */
.dataTables_paginate {
	float: right;
	text-align: right;
}

/* Two button pagination - previous / next */
.paginate_disabled_previous,
.paginate_enabled_previous,
.paginate_disabled_next,
.paginate_enabled_next {
	height: 19px;
	float: left;
	cursor: pointer;
	*cursor: hand;
	color: #111 !important;
}
.paginate_disabled_previous:hover,
.paginate_enabled_previous:hover,
.paginate_disabled_next:hover,
.paginate_enabled_next:hover {
	text-decoration: none !important;
}
.paginate_disabled_previous:active,
.paginate_enabled_previous:active,
.paginate_disabled_next:active,
.paginate_enabled_next:active {
	outline: none;
}

.paginate_disabled_previous,
.paginate_disabled_next {
	color: #666 !important;
}
.paginate_disabled_previous,
.paginate_enabled_previous {
	padding-left: 23px;
}
.paginate_disabled_next,
.paginate_enabled_next {
	padding-right: 23px;
	margin-left: 10px;
}

.paginate_enabled_previous { background: url('../images/back_enabled.png') no-repeat top left; }
.paginate_enabled_previous:hover { background: url('../images/back_enabled_hover.png') no-repeat top left; }
.paginate_disabled_previous { background: url('../images/back_disabled.png') no-repeat top left; }

.paginate_enabled_next { background: url('../images/forward_enabled.png') no-repeat top right; }
.paginate_enabled_next:hover { background: url('../images/forward_enabled_hover.png') no-repeat top right; }
.paginate_disabled_next { background: url('../images/forward_disabled.png') no-repeat top right; }

/* Full number pagination */
.paging_full_numbers {
	height: 22px;
	line-height: 22px;
}
.paging_full_numbers a:active {
	outline: none
}
.paging_full_numbers a:hover {
	text-decoration: none;
}

.paging_full_numbers a.paginate_button,
.paging_full_numbers a.paginate_active {
	border: 1px solid #aaa;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 2px 5px;
	margin: 0 3px;
	cursor: pointer;
	*cursor: hand;
	color: #333 !important;
}

.paging_full_numbers a.paginate_button {
	background-color: #ddd;
}

.paging_full_numbers a.paginate_button:hover {
	background-color: #ccc;
	text-decoration: none !important;
}

.paging_full_numbers a.paginate_active {
	background-color: #99B3FF;
}


/*
 * Processing indicator
 */
.dataTables_processing {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 250px;
	height: 30px;
	margin-left: -125px;
	margin-top: -15px;
	padding: 14px 0 2px 0;
	border: 1px solid #ddd;
	text-align: center;
	color: #999;
	font-size: 14px;
	background-color: white;
}


/*
 * Sorting
 */
.sorting { background: url('../images/sort_both.png') no-repeat center right; }
.sorting_asc { background: url('../images/sort_asc.png') no-repeat center right; }
.sorting_desc { background: url('../images/sort_desc.png') no-repeat center right; }

.sorting_asc_disabled { background: url('../images/sort_asc_disabled.png') no-repeat center right; }
.sorting_desc_disabled { background: url('../images/sort_desc_disabled.png') no-repeat center right; }
 
table.dataTable th:active {
	outline: none;
}


/*
 * Scrolling
 */
.dataTables_scroll {
	clear: both;
}

.dataTables_scrollBody {
	*margin-top: -1px;
	-webkit-overflow-scrolling: touch;
}


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

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

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

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

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

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

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

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

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

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

</style>

<table cellpadding="0" cellspacing="0" border="0" id="lpcTable" width="960" class="display">
            <thead>
                <tr>
                    <th>Item</th>
                    <th>Status</th>
                    <th>Channel</th>
                    <th>Match</th>
                </tr>
            </thead>
            <tbody>

				   <tr>
                        <td>1</td>
                        <td>On</td>
                        <td>4</td>
                        <td>Y</td>
                	</tr>
                    <tr>
                        <td>2</td>
                        <td>On</td>
                        <td>5</td>
                        <td>Y</td>
                	</tr>

            </tbody>
        </table>

Open in new window

0
 
blue44Author Commented:
That was very helpful actually -- thank you!!  The issue ending up being the wrong DOCTYPE.  I had to update mine to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
      <head>
          <meta http-equiv="content-type" content="text/html;charset=utf-8" />
0
 
Kyle HamiltonData ScientistCommented:
:)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.