更改 jQuery DataTables 标题中的排序图标
Posted
技术标签:
【中文标题】更改 jQuery DataTables 标题中的排序图标【英文标题】：Changing sorting icons in jQuery DataTables header 【发布时间】：2020-10-02 12:51:44 【问题描述】：我正在使用带有 bootstrap 4 样式的 DataTables 插件来绘制我的表格。下面是代码：
$(document).ready(function ()
$('#my-table').DataTable(
scrollY: '20vh',
paging: false,
dom: '<f>t',
searching: false
);
);body
padding: 3%;
<!DOCTYPE html>
<html lang="en">
<head>
<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- dataTable -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<table class="table table-striped table-hover table-fit" id="my-table">
<thead class='thead-dark'>
<tr>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
</tbody>
</table>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<!-- Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<!-- dataTable -->
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
</body>我想将标题中的排序箭头更改为其他一些看起来更大的图标。像这样的：
我已经关注了很多答案： How to change Jquery datatable sort icon color
How to change the color of the sorting arrows in DataTables
https://datatables.net/forums/discussion/40100/replacing-original-sorting-icons-with-bootstrap-4
我已经在我的 css 文件中尝试过这个：
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:before
content: "\E253" !important;
但它们不会改变或图标会变形：
我该怎么做？或者我怎样才能让原来的图标变粗？
【问题讨论】：
使用与您类似的方法，here 是一个将默认图标替换为箭头的示例。除了那些箭头，也许你可以使用你的三角形（例如this 或类似的）。 添加解决方案@hydradon。 【参考方案1】：使用这个：
$(document).ready(function ()
$('#my-table').DataTable(
scrollY: '20vh',
paging: false,
dom: '<f>t',
searching: false
);
);body
padding: 3%;
table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc_disabled:before
right: 1em;
content: "\02C6" !important;
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after
right: 0.5em;
content: "\02C7" !important;
<!DOCTYPE html>
<html lang="en">
<head>
<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- dataTable -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<table class="table table-striped table-hover table-fit" id="my-table">
<thead class='thead-dark'>
<tr>
<th>Header
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
</tbody>
</table>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<!-- Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<!-- dataTable -->
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
</body>【讨论】：
以上是关于更改 jQuery DataTables 标题中的排序图标的主要内容，如果未能解决你的问题，请参考以下文章
如何更改 DataTables jQuery 插件的分页按钮数量