javascript - dataTables jquery - how to add sorting imageicon?

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

My code:

$("#rates").dataTable({
         "bPaginate": false,
         "sScrollY":  "250px",
         "bAutoWidth": false,
         "bScrollCollapse": true,
         "fnInitComplete": function() {
                this.css("visibility", "visible");},
                "bLengthChange": false
    });

Share Improve this question edited Sep 7, 2013 at 4:36 madth3 7,34412 gold badges52 silver badges74 bronze badges asked Jun 21, 2013 at 11:43 kishore 1,6475 gold badges16 silver badges17 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 6

$(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/1999/xhtml">

<head>
  <title>new document</title>
  <script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="http://code.jquery./ui/1.10.3/jquery-ui.js"></script>
  <script src="http://ajax.aspnetcdn./ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
  <link href="http://ajax.aspnetcdn./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/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
 <head>
  <title> new document </title>
 <script src="http://code.jquery./jquery-1.9.1.js"></script>
  <script src="http://code.jquery./ui/1.10.3/jquery-ui.js"></script>
  <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn./ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn./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>

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - dataTables jquery - how to add sorting imageicon? - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)