Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Unable to highlight rows using jQuery plugin - DataTables

Posted on 2012-08-17
5
Medium Priority
?
1,204 Views
Last Modified: 2012-08-20
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
0
Comment
Question by:blue44
  • 3
  • 2
5 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38308284
post your page. without seeing what you've done, people can't help you.
0
 

Author Comment

by:blue44
ID: 38313289
<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
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 2000 total points
ID: 38313383
Hi,

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

http://candpgeneration.com/EE/highlightRows.html
0
 

Author Closing Comment

by:blue44
ID: 38313661
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38313676
:)
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses

580 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question