dataTables jquery - wie wird das Sortieren von Bild/Icon hinzugefügt?

Ich benutze DataTables jquery. Ich möchte Sortierbild zu den Spalten hinzufügen und das Bild Shd auch beim Sortieren ändern. Das heißt, wenn das Bild absteigende Symbol zeigt und beim Klicken sollte es auf aufsteigende Symbol ändern. Wie kann es mit DataTables jquery getan werden?dataTables jquery - wie wird das Sortieren von Bild/Icon hinzugefügt?

Mein Code:

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

Quelle

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>

Stellen Sie sicher, u eine richtige js und CSS-Dateien hinzugefügt haben. Versuchen Sie diesen Code, es funktioniert für mich

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

Quelle

2013-06-21 12:05:40 Vignesh

wo fügen Sie das Sortierbild hinzu? – kishore

Ich habe das CSS nicht aufgenommen. Das ist also das Problem. Danke – kishore

Nachdem Sie die Bilder-Ordner in Ihrem Projekt aufgenommen haben, stellen Sie die Links in Ihrem CSS, um Ihre Bilder zu zeigen. Suchen Sie unter Code in CSS:

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

Quelle

2015-12-01 06:57:34

dataTables jquery - wie wird das Sortieren von Bild/Icon hinzugefügt?

Antwort

Verwandte Themen