删除 jQuery DataTables 中的排序箭头

Posted 2023-05-07

【中文标题】删除 jQuery DataTables 中的排序箭头

【英文标题】：Remove sorting arrows in jQuery DataTables

【发布时间】：2013-12-10 09:00:33

【问题描述】：

我正在使用 jQuery DataTables 插件。

有没有办法摆脱它们显示在标题中以指示排序选项的小箭头？ 我想保留通过单击按此列排序的标题的功能，我只是不想显示箭头图标，因为它们会更改我的列标题的布局。

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>

【参考方案1】：

图标在 CSS 类上定义为 background : url(..)。通过以下方式禁用它们：

.sorting, .sorting_asc, .sorting_desc 
    background : none;

参见 jsfiddle -> http://jsfiddle.net/5V2Dx/ 注意：此解决方案适用于数据表 1.9.x！！

---

更新。使用 datatables 1.10.x 时，用于重置标题图标的 CSS 有点不同：

table.dataTable thead .sorting, 
table.dataTable thead .sorting_asc, 
table.dataTable thead .sorting_desc 
    background : none;

参见 -> http://jsfiddle.net/kqpv3ub9/（更新后的演示使用的是 dataTables 1.10.11）

【讨论】：

我需要相同的解决方案，但我无法使用此选项。我把这个 css 脚本放在我的文件中，但它没有删除箭头。有什么想法吗？

@LargeTuna，查看更新。我猜你正在使用数据表 1.10.x。

确实为我工作，但这确实 ` .dataTable > thead > tr > th[class*=sort]:after display:none; `

table.dataTable thead .sorting 背景：无； 在 2018 年工作：

@xtlc，垃圾，您建议的答案只是完全禁用排序，这不是问题的答案。您可以在 7 年前这样做，并且可以在 2020 年这样做，但禁用排序功能不是这个问题的目的，而是关于删除排序箭头...

【参考方案2】：

所提供的解决方案都不适合我。但是我刚刚找到了这个；

.dataTable > thead > tr > th[class*="sort"]:before,
.dataTable > thead > tr > th[class*="sort"]:after 
    content: "" !important;

PS.：DataTables 版本"datatables": "~1.10.2"

【讨论】：

这是正确的答案。以上所有对我都不起作用。我有 DataTables 1.10.10。

+1;这是正确的答案如果您使用的是dataTables Bootstrap styling plugin。

必须添加 :before 和 :after

.dataTable > thead > tr > th[class*='sort']:before, .dataTable > thead > tr > th[class*='sort']:after content: '' ！重要的;

这对我有用！

【参考方案3】：

您可以使用如下的数据表属性，它会隐藏排序图标 来自数据表列：

"targets": 'no-sort',
"bSort": false,
"order": []

【讨论】：

这是最好的答案，因为您不需要操纵 css 样式。谢谢@Edgar

这是唯一适用于数据表 1.10.19 的解决方案，看起来像是“官方”的方式。这应该被标记为正确答案。

伟大的@cetipabo :)

有没有办法覆盖？我在另一张桌子上这样做并工作了，但我在另一张桌子上尝试过，但它仍然存在。

这也会禁用排序吗？

【参考方案4】：

（自 DataTables 1.10 起）​​如果您不需要它，禁用排序是防止箭头控件出现的一种方法。通过将 "ordering" 选项指定为 false 在表初始化时执行此操作。

示例：

$("#example").DataTable(
   "ordering": false
);

JSFiddle

Documentation:

启用或禁用列排序 - 就这么简单！

警告：根本没有排序。

另一种选择是禁用所有列的排序。然后，您可以通过控制箭头仅显示在已排序的列上以编程方式设置排序：

var after = $('#after').DataTable(
  "order": [[1,"asc"]],                       // sorting 2nd column
  "columnDefs": [
     "orderable": false, "targets": "_all"  // Applies the option to all columns
  ]
);

JSFiddle

【讨论】：

在"columnDefs": [...] 中添加"orderable": false 就像一个魅力——这应该是当今公认的答案："columnDefs": [ "orderable": false, "targets": [1,2] , ...]

【参考方案5】：

对于新版本的数据表：

<style>
     .dataTable > thead > tr > th[class*="sort"]::afterdisplay: none
</style>

【参考方案6】：

快速技巧（这将隐藏一个排序按钮，但功能仍然有效）： - 创建 CSS：

.no-sort::after  display: none!important; 

.no-sort  pointer-events: none!important; cursor: default!important; 

然后将其添加到表格的标题中：

<th class="no-sort">Heading</th>

无论如何这里是长答案，您可以使用这段代码禁用特定列的排序功能（base-idx：0），以及删除排序按钮：

$('#example').dataTable( 
  "columnDefs": [
     "orderable": false, "targets": 0 
  ]
 );

但是，如果您在第一列中将 orderable 设置为 false，这将无法完美运行。排序功能将停止，但按钮仍然存在。因为，默认情况下，第一列设置为升序排列（'order': [[ 0, 'asc' ]）。要禁用此“烦人”默认设置，请再添加一个选项：“订单”：

$('#example').dataTable( 
      "columnDefs": [
         "orderable": false, "targets": 0 
      ],
      "order": [],  // not set any order rule for any column.
);

【讨论】：

第一个解决方案适用于这种 css 样式：.no-sort::before display: none!important;

【参考方案7】：

箭头具有与之关联的某些类。您可以使用以下 CSS 来隐藏这些元素。

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after 
    display: none;

【参考方案8】：

这一切似乎有点复杂，为什么不在<th> 标签上使用data-sortable="false" 属性，然后在JS 中使用click 触发器执行removeAttribute("class");？

【讨论】：

谢谢！ data-sortable="false" 为我做的

【参考方案9】：

使用 CSS：

.DataTables_sort_icon  display:none;

【参考方案10】：

这对我有用

.dataTable > thead > tr > th[class*=sort]:after
    display:none;

【参考方案11】：

在最新版本的数据表/CDN 上，它又是不同的

table.dataTable thead .sorting:after

    display: none;

隐藏过滤器。

问候

【参考方案12】：

例子：

<display:column property="......" title="......" sortable="true"/>

这将使列可排序而不显示箭头。

【参考方案13】：

<style>
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before 
    display: none;

</style>

在我的机器上使用 DT 2.2.3

【参考方案14】：

我在以前的答案中没有看到的一种方法，我相信最好的方法是使用 jQuery DataTable。这样您就可以更好地控制表格的事件以及如何与之交互。

$('.tableclass').dataTable(
  "order":[[0,"desc"],[1,"asc"]], //Enable ordering by first column then second
  "aoColumnDefs": [
     "bSortable": false, "aTargets": [ "_all" ]  //disable ordering events and takeout the icon
   ]
 );

当然，CSS 选项仍然有效。

【参考方案15】：

对于 DataTables 1.10.7，davidkonrad css 样式的一个小变体：

table.dataTable thead th.sorting, 
table.dataTable thead th.sorting_asc, 
table.dataTable thead th.sorting_desc 
    background : none;

包括“th”元素。

【参考方案16】：

这将让您更改自定义图标的默认排序图标，这些图标来自 Irshad 上面的帖子和 Suschil 来自 here 的帖子。由于浏览器禁用了字体渲染，因此不得不这样做，这是我们无法控制的。

.dataTable > thead > tr > th[class*="sort"]::afterdisplay: none

table.dataTable thead .sorting  background: url('/Content/images/sort-both.png') no-repeat center right; 
table.dataTable thead .sorting_asc  background: url('/Content/images/sort-asc-list.png') no-repeat center right; 
table.tabledataTable thead .sorting_desc  background: url('/Content/images/sort-desc-list.png') no-repeat center right; 

【参考方案17】：

就我而言，这很好用。

.sorting:after,
.sorting_asc:after,
.sorting_desc:after
    content: "";
    background: none !important;

【参考方案18】：

这对我有用。

 #sample_1>thead>tr>th.sorting, #sample_1>thead>tr>th.sorting_asc, #sample_1>thead>tr>th.sorting_desc 
        background : none;

    
    #sample_1>thead>tr>th.sorting:after, #sample_1>thead>tr>th.sorting_asc:after, #sample_1>thead>tr>th.sorting_desc::after 
        content: none; 
    

【参考方案19】：

CSS 类 sorting_asc 和 sorting_desc 带来图标。

对特定表进行本地化修复的最简单解决方案是，一旦表被初始化，在 fnInitComplete 中执行以下操作：

$(TABLE).find("thead th").removeClass("sorting_asc");

【参考方案20】：

$('#sample_1 thead tr th:first-child').removeClass('sorting');

【参考方案21】：

放在CSS下面。它只会隐藏图标，但排序会起作用。

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled 
  background-image: none!important;

【参考方案22】：

将此样式添加到您的页面

table.dataTable thead .sorting::after 
    opacity: 0.2;
    content: "";

【参考方案23】：

您实际上也可以删除文件夹中的图标图像（而不是添加新的 CSS）：

DataTables-1.10.16\images

【参考方案24】：

还有另一种解决方案可以隐藏列中的排序图标， 将 css 类应用于标题，比如说，

<th class="sorting_disabled"></th>

并在样式中定义css类

.sorting_disabled

   background-image:none !important;

此解决方案适用于 jquery 数据表版本 1.10+ 并经过测试

【讨论】：

或者（以同样的方式）更改 th.sorting 的 css

@BenA.Hilleli 没看懂，请再来。

我们可以覆盖现有类的css，而不是添加一个全新的类（这需要更多的css，另一个需要考虑的问题），即可排序的dataTables中的th已经有类“排序”，只需覆盖 th.sorting 背景：无；如果这没有覆盖它（由于比其他 css 调用更具体），请添加特异性： table.dataTable thead th.sorting - 这可以让您免于使用“！important”（！important 是模块化的宠儿/over-ride-able css); ......或者也许只是删除 .sorting 类

【参考方案25】：

下一个代码对我有用：

对于 asc 箭头，我使用了下一个 css：

   table.dataTable thead .sorting_asc 
      background-image: none;
   

查找很简单：使用 chrome 调试器查找列并开始禁用相关样式。然后你会找到相关的CSS。

使用相同的方法禁用 desc 箭头。

和平！

【参考方案26】：

我发现我需要包含“重要”限定符

   <style>
        table.dataTable thead .sorting, 
        table.dataTable thead .sorting_asc, 
        table.dataTable thead .sorting_desc  background : none !important;
    </style>

并确保它出现在所有其他 .css 文件之后。

【参考方案27】：

转到 dataTables.boostrap.min.css 或 dataTables.bootstrap.css，搜索 content:"↑" 并删除箭头即可。