删除 jQuery DataTables 中的排序箭头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20196397/
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
Remove sorting arrows in jQuery DataTables
提问by user2571510
I am using the jQuery DataTablesplugin.
我正在使用jQuery DataTables插件。
Is there a way I can get rid of the little arrows they display in the headers to indicate sorting options ? I would like to keep the functionality that by click on a header it sorts by this column, I just dont want to display the arrow icons as they change the layout of my column headers.
有没有办法可以摆脱它们在标题中显示的小箭头以指示排序选项？我想保留通过单击按此列排序的标题的功能，我只是不想显示箭头图标，因为它们会更改我的列标题的布局。
Firebug shows my headers as follows:
Firebug 显示我的标题如下：
<th class="sorting" role="columnheader" tabindex="0" aria-controls="myTable" rowspan="1" colspan="1" style="width: 151px;" aria-label="Category: activate to sort column ascending">Category</th>
回答by davidkonrad
The icons is defined as background : url(..)on the CSS classes. Disable them by :
图标background : url(..)在 CSS 类中定义。通过以下方式禁用它们：
.sorting, .sorting_asc, .sorting_desc {
background : none;
}
see jsfiddle -> http://jsfiddle.net/5V2Dx/Note : This solution is for datatables 1.9.x!!
请参阅 jsfiddle -> http://jsfiddle.net/5V2Dx/注意：此解决方案适用于数据表 1.9.x！！
Update. When using datatables 1.10.x, the CSS for resetting the header icons is a little bit different :
更新。使用数据表 1.10.x 时，用于重置标题图标的 CSS 有点不同：
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
background : none;
}
see -> http://jsfiddle.net/kqpv3ub9/(updated demo is using dataTables 1.10.11)
参见 -> http://jsfiddle.net/kqpv3ub9/（更新的演示使用 dataTables 1.10.11）
回答by Renato Gama
None of the presented solutions worked for me. But I have just found this one;
所提出的解决方案都不适合我。但我刚刚找到了这个；
.dataTable > thead > tr > th[class*="sort"]:before,
.dataTable > thead > tr > th[class*="sort"]:after {
content: "" !important;
}
PS.: DataTables version "datatables": "~1.10.2"
PS.: 数据表版本 "datatables": "~1.10.2"
回答by Ankita_systematix
You can use the datatable properties like below, it will hide the sorting icon from datatable columns :
您可以使用如下所示的数据表属性，它将隐藏数据表列中的排序图标：
"targets": 'no-sort',
"bSort": false,
"order": []
回答by Irshad Khan
For new version of DataTables:
对于新版本的数据表：
<style>
.dataTable > thead > tr > th[class*="sort"]::after{display: none}
</style>
回答by Edgar Couto
The arrows have certain classes associated with them. You can use the following CSS to hide those elements.
箭头具有与它们相关联的某些类。您可以使用以下 CSS 来隐藏这些元素。
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
display: none;
}
回答by Nguyen Tan Dat
Quick trick (this will hide a sort button, but function still works): - Create CSS:
快速技巧（这将隐藏排序按钮，但功能仍然有效）： - 创建 CSS：
.no-sort::after { display: none!important; }
.no-sort { pointer-events: none!important; cursor: default!important; }- Then add this into a header of your table:
- 然后将其添加到表的标题中：
<th class="no-sort">Heading</th>Anyway here is long answer, you can use this piece of code to disable sort function of the particular column (base-idx: 0), AS WELL AS remove a sort button:
无论如何，这是一个很长的答案，您可以使用这段代码禁用特定列（base-idx：0）的排序功能，以及删除排序按钮：
$('#example').dataTable( {
"columnDefs": [
{ "orderable": false, "targets": 0 }
]
} );But this won't work perfectly if you set orderable as false in the first column. The sort function will stop but the button is still there. Because, by default, the first column was set to order ascendingly ('order': [[ 0, 'asc' ]). To disable this 'annoying' default, add one more option: "order":
但是，如果您在第一列中将 orderable 设置为 false，这将无法正常工作。排序功能将停止，但按钮仍然存在。因为，默认情况下，第一列被设置为升序 ('order': [[ 0, 'asc' ])。要禁用此“烦人”的默认设置，请再添加一个选项：“order”：
$('#example').dataTable( {
"columnDefs": [
{ "orderable": false, "targets": 0 }
],
"order": [], // not set any order rule for any column.
});回答by Logan Hoerth
(Since DataTables 1.10) If you don't need it, disabling ordering is one way to prevent the arrow controls from appearing. Do this on table initialization by specifying the "ordering"option as false.
（自DataTables 1.10 起）如果您不需要它，禁用排序是防止出现箭头控件的一种方法。通过将“排序”选项指定为false在表初始化时执行此操作。
Example:
示例：
$("#example").DataTable({
"ordering": false
});
Enable or disable ordering of columns - it is as simple as that!
启用或禁用列排序 - 就这么简单！
Caveat: no sorting at all.
警告：根本没有排序。
Another alternative is to disable ordering across all columns. Then you can set ordering programmatically with the control arrow(s) only displaying on sorted column(s):
另一种选择是禁用所有列的排序。然后，您可以使用仅显示在已排序列上的控制箭头以编程方式设置排序：
var after = $('#after').DataTable({
"order": [[1,"asc"]], // sorting 2nd column
"columnDefs": [
{ "orderable": false, "targets": "_all" } // Applies the option to all columns
]
});
回答by A. Wolff
Using CSS:
使用 CSS：
.DataTables_sort_icon { display:none;}
回答by BeNice
This all seems a bit complicated why not use the data-sortable="false"attribute on the <th>tag and then just do a removeAttribute("class");in JS with an clicktrigger?
这一切看起来有点复杂，为什么不使用标签data-sortable="false"上的属性<th>，然后removeAttribute("class");在 JS 中用click触发器做一个？
回答by Bakly
This is what worked for me
这对我有用
.dataTable > thead > tr > th[class*=sort]:after{
display:none;
}
