dataTables jquery - cách thêm hình ảnh/biểu tượng sắp xếp?

Tôi sử dụng dataTables jquery. Tôi muốn thêm hình ảnh phân loại cho các cột và shd hình ảnh cũng thay đổi về sắp xếp. Đó là, nếu hình ảnh đang hiển thị biểu tượng giảm dần và khi nhấp vào nó sẽ thay đổi thành biểu tượng tăng dần. Làm thế nào nó có thể được thực hiện bằng cách sử dụng dataTables jquery?dataTables jquery - cách thêm hình ảnh/biểu tượng sắp xếp?

Mã của tôi:

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

Nguồn

2013-06-21 kishore

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

Hãy chắc chắn rằng u đã thêm một js thích hợp và các file css. Hãy thử mã này làm việc cho tôi

<!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>

Nguồn

2013-06-21 12:05:40 Vignesh

bạn thêm hình ảnh sắp xếp ở đâu? – kishore

Tôi không bao gồm css. Vì vậy, đó là vấn đề. – kishore

Sau khi bạn đã đưa thư mục hình ảnh vào dự án, hãy điều chỉnh liên kết trong CSS để trỏ tới hình ảnh của bạn. Tìm mã bên dưới trong CSS:

table.dataTable thead .sorting { 
    background-image: url("../images/sort_both.png"); 
}

Nguồn

2015-12-01 06:57:34

dataTables jquery - cách thêm hình ảnh/biểu tượng sắp xếp?

Trả lời

Các vấn đề liên quan