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 });3 Answers
$(document).ready(function() { $("#tblVal").dataTable({ "bPaginate": false, "sScrollY": "250px", "bAutoWidth": false, "bScrollCollapse": true, "fnInitComplete": function() { this.css("visibility", "visible"); }, "bLengthChange": false });
});<html xmlns="">
<head> <title>new document</title> <script src=""></script> <script src=""></script> <script src=""></script> <link href="" rel="stylesheet" />
</head>
<body> <div> <table> <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" "">
<html xmlns=""> <head> <title> new document </title> <script src=""></script> <script src=""></script> <script type="text/javascript" charset="utf8" src=""></script> <link rel="stylesheet" type="text/css" href=""> <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> <table> <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>After you have included the images folder in your project, adjust the links in your CSS to point to your images. Look for below code in CSS:
table.dataTable thead .sorting { background-image: url("../images/sort_both.png");
}By default, datatable enables sorting. You cannot change the colour of the sort icons in Datatables because those are not icons they are PNG images. You need to override those CSS properties. (DataTables 1.10)
- Ascending
table.dataTable thead .sorting_asc { background-image: url("/YourImageFolder/sort_asc.png")
}- Descending
table.dataTable thead .sorting_desc { background-image: url("/YourImageFolder/sort_desc.png")
}- Both Disabled
table.dataTable thead .sorting { background-image: url("/YourImageFolder/sort_both.png")
}- Ascending Disabled
table.dataTable thead .sorting_asc_disabled { background-image: url("/YourImageFolder/sort_asc_disabled.png")
}- Descending Disabled
table.dataTable thead .sorting_desc_disabled { background-image: url("/YourImageFolder/sort_desc_disabled.png")
}
