Menu
I use dataTables jquery. I want to add sorting image to the columns and the image shd also change on sorting.That is, if the image is showing descending icon and on clicking it should change to ascending icon. How it can be done using dataTables jquery?
My code:
$("#rates").dataTable({
"bPaginate": false,
"sScrollY": "250px",
"bAutoWidth": false,
"bScrollCollapse": true,
"fnInitComplete": function() {
this.css("visibility", "visible");},
"bLengthChange": false
});
598
$(document).ready(function() {
$("#tblVal").dataTable({
"bPaginate": false,
"sScrollY": "250px",
"bAutoWidth": false,
"bScrollCollapse": true,
"fnInitComplete": function() {
this.css("visibility", "visible");
},
"bLengthChange": false
});
});<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>new document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" rel="stylesheet" />
</head>
<body>
<div id="foo">
<table id="tblVal" class="data display datatable">
<thead>
<tr>
<th>s.no</th>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>100</td>
<td>vsa</td>
</tr>
<tr>
<td>2</td>
<td>101</td>
<td>asa</td>
</tr>
<tr>
<td>3</td>
<td>102</td>
<td>nfsa</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>Make sure u have added a proper js and css files . Try this code it's working for me
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script type="text/javascript">
$(document).ready(function(){
$("#tblVal").dataTable({
"bPaginate": false,
"sScrollY": "250px",
"bAutoWidth": false,
"bScrollCollapse": true,
"fnInitComplete": function() {
this.css("visibility", "visible");},
"bLengthChange": false
});
});
</script>
</head>
<body>
<div id="foo">
<table id="tblVal" class="data display datatable">
<thead>
<tr>
<th>s.no</th>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>100</td>
<td>vsa</td>
</tr>
<tr>
<td>2</td>
<td>101</td>
<td>asa</td>
</tr>
<tr>
<td>3</td>
<td>102</td>
<td>nfsa</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
