dataTables jquery - 如何添加排序图像/图标？
Posted
技术标签:
【中文标题】dataTables jquery - 如何添加排序图像/图标？【英文标题】：dataTables jquery - how to add sorting image/icon? 【发布时间】：2013-06-18 12:52:15 【问题描述】：我使用 dataTables jquery。我想将排序图像添加到列中，并且图像 shd 在排序时也会发生变化。也就是说，如果图像显示降序图标并且单击它应该变为升序图标。使用dataTables jquery如何实现？
我的代码：
$("#rates").dataTable(
"bPaginate": false,
"sScrollY": "250px",
"bAutoWidth": false,
"bScrollCollapse": true,
"fnInitComplete": function()
this.css("visibility", "visible");,
"bLengthChange": false
);
【问题讨论】：
【参考方案1】：$(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>确保您添加了正确的 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>
【讨论】：
排序图片在哪里添加？ 我没有包含 css。这就是问题所在。谢谢【参考方案2】：在项目中包含 images 文件夹后，调整 CSS 中的链接以指向您的图像。在 CSS 中查找以下代码：
table.dataTable thead .sorting
background-image: url("../images/sort_both.png");
【讨论】：
【参考方案3】：默认情况下，数据表启用排序。 您无法更改数据表中排序图标的颜色，因为它们不是图标，它们是PNG 图像。 您需要覆盖这些 CSS 属性。 （数据表 1.10）
升序table.dataTable thead .sorting_asc
background-image: url("/YourImageFolder/sort_asc.png")
table.dataTable thead .sorting_desc
background-image: url("/YourImageFolder/sort_desc.png")
table.dataTable thead .sorting
background-image: url("/YourImageFolder/sort_both.png")
table.dataTable thead .sorting_asc_disabled
background-image: url("/YourImageFolder/sort_asc_disabled.png")
table.dataTable thead .sorting_desc_disabled
background-image: url("/YourImageFolder/sort_desc_disabled.png")
【讨论】：
以上是关于dataTables jquery - 如何添加排序图像/图标？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 jQuery dataTables 列中添加一些信息
关于jQuery中dataTable问题，如何修改sAjaxSource添加参数