I am using the JS from this link for sorting my tables but this JS is not highlighting the selected column.
I'm not very much into JavaScript that's why i want help to do that. What i need is that on clicking the heading of the column that has to be sorted the whole column should get highlighted with the sorted data.
Please help me to do so !!
JS source link ->Sorttable.js
You can't highlight the sorted column, using Sorttable.js, without some non-trivial modifications to the JavaScript.
Better to switch libraries to something more standard and supported.
Load jQuery into your page.
Then you can also load the DataTables plug-in.
Then redefine the style sorting_1 to taste. EG:
td.sorting_1 {
background-color: #ECFFB3 !important;
}
.
Complete example (See it in action at jsbin) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>DataTables example with highlighted columns</title>
<link href="http://www.datatables.net/release-datatables/media/css/demo_table.css" rel="stylesheet" type="text/css">
<style type="text/css">
td.sorting_1 {
background-color: #ECFFB3 !important;
}
th {
padding-right: 22px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://www.datatables.net/release-datatables/media/js/jquery.dataTables.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready
(
function ()
{
var oTable = $('#exampleTable').dataTable
( {
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": true,
"bInfo": false,
"bAutoWidth": false,
"bSortClasses": true
} );
}
);
</script>
</head>
<body>
<table id="exampleTable">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td class="center">7</td>
<td class="center">A</td>
</tr>
</tbody>
</table>
</body>
</html>