CODEWITHSUNDEEP
javascriptjquerysortingdatatables
kishore
kishore

Reputation: 1647

dataTables jquery - how to add sorting image/icon?

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
    });

Upvotes: 5

Views: 24783

Answers (3)

Manish Thomas
Manish Thomas

Reputation: 199

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")
}

Upvotes: 1

Vignesh
Vignesh

Reputation: 1518

$(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>

Upvotes: 6

Karani GK.
Karani GK.

Reputation: 49

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");
}

Upvotes: 3

Related Questions