dataTables jquery - 如何添加排序图像/图标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17234417/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
dataTables jquery - how to add sorting image/icon?
提问by kishore
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?
我使用数据表 jquery。我想将排序图像添加到列中，并且图像 shd 在排序时也会发生变化。也就是说，如果图像显示降序图标并且单击它应该更改为升序图标。如何使用 dataTables jquery 来完成？
My code:
我的代码：
$("#rates").dataTable({
"bPaginate": false,
"sScrollY": "250px",
"bAutoWidth": false,
"bScrollCollapse": true,
"fnInitComplete": function() {
this.css("visibility", "visible");},
"bLengthChange": false
});
回答by Vignesh
$(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
确保您添加了正确的 js 和 css 文件。试试这个代码它对我有用
<!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>
回答by Geoffrey K. Kamundi
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:
在项目中包含图像文件夹后，调整 CSS 中的链接以指向图像。在 CSS 中查找以下代码：
table.dataTable thead .sorting {
background-image: url("../images/sort_both.png");
}
回答by Manish Thomas
By default, datatable enables sorting. You cannot change the colour of the sort icons in Datatables because those are not iconsthey are PNG images. You need to override those CSS properties. (DataTables 1.10)
默认情况下，数据表启用排序。您无法更改数据表中排序图标的颜色，因为它们不是图标，而是PNG 图像。您需要覆盖这些 CSS 属性。（数据表 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")
}
