在jQuery DataTables中移除排序箭头

Question

我正在使用 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>

- user2571510

Answer 1

之前提供的解决方法都没有帮到我，但是我刚刚找到了这个方法。

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

注意：DataTables 版本为 "datatables": "~1.10.2"

- Renato Gama

---

这是正确的答案。以上所有内容对我都不起作用。我使用的是DataTables 1.10.10版本。 - Michal

如果您正在使用dataTables Bootstrap样式插件，那么+1是正确答案。 - davidkonrad

必须添加:before和:after。 - Tim Morton

.dataTable > thead > tr > th[class*='sort']:before, .dataTable > thead > tr > th[class*='sort']:after { content: '' !important; } - goyote

完美运作。下面详细列出的大多数其他解决方案对我来说都不起作用。谢谢。 - undefined

Answer 2

这里的图标是在CSS类中通过background : url(..)进行定义。要禁用它们，请执行以下操作：

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

查看 jsfiddle -> http://jsfiddle.net/5V2Dx/ 注意：此解决方案适用于datatables 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）

- davidkonrad

---

我需要相同的解决方案，但我无法让此选项起作用。我将这个CSS脚本放在我的文件中，但它并没有去除箭头。有什么想法吗？ - LargeTuna

@LargeTuna，请看更新。我猜你正在使用datatables 1.10.x。 - davidkonrad

这段代码对我有用，但是这个 .dataTable > thead > tr > th[class*=sort]:after{ display:none; } - Bakly

table.dataTable thead .sorting { background: none; } 在2018年起作用： - Jordan Nakamoto

@xtlc，废话，你提出的答案只是完全禁用排序，这不是问题的答案。你可以在7年前这样做，也可以在2020年这样做，但禁用排序功能并不是这个问题的关键，它是关于删除排序箭头的... - davidkonrad

重新阅读问题后，我发现它更多地涉及隐藏图标而不是禁用功能（这会隐藏图标，但不是 OP 所要求的）。我删除了我的评论。 - xtlc

Answer 3

您可以像以下方式使用datatable属性，它将隐藏datatable列中的排序图标：

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

- Ankita_systematix

---

这是最佳答案，因为您不需要操作CSS样式。谢谢@Edgar。 - poostchi

这是我在datatable 1.10.19上工作的唯一解决方案，看起来也是“官方”的做法。应该将其标记为正确答案。 - cetipabo

太棒了 @cetipabo :) - Ankita_Shrivastava

@LeninRajRajasekaran 我猜是的，请尝试一下。 - Ankita_Shrivastava

非常好的答案，一秒钟解决了我的问题 :) - Jegan Baskaran

Answer 4

(自从 DataTables 1.10 版本以来) 如果您不需要排序功能，禁用排序是防止箭头控件出现的一种方法。在表格初始化时通过将"ordering"选项指定为false来实现。

示例：

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

JSFiddle

文档:

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

注意：完全没有排序。

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

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

JSFiddle

- Logan Hoerth

---

在"columnDefs": [...]中添加"orderable": false非常有效 - 这应该是现在被接受的答案："columnDefs": [ { "orderable": false, "targets": [1,2] }, ...] - xtlc

Answer 5

快速技巧（这将隐藏排序按钮，但功能仍然有效）： - 创建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' ]]）。要禁用这个“烦人”的默认设置，只需添加一个选项："order":

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

- Nguyen Tan Dat

---

第一种解决方案对我有用，使用以下CSS样式： .no-sort::before { display: none!important; } - Fereshteh Mirjalili

Answer 6

对于DataTables的新版本：

<style>
     .dataTable > thead > tr > th[class*="sort"]::after{display: none}
</style>

- Irshad Khan

Answer 7

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

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

- Edgar Couto

Answer 8

这看起来有点复杂，为什么不在标签上使用data-sortable="false"属性，然后只需在JS中使用click触发器执行removeAttribute("class")即可呢？

- BeNice

---

谢谢！data-sortable="false" 对我有用。 - TrojanName

这里没起作用。 - sergiol

Answer 9

这是我行之有效的方法

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

- Bakly

Answer 10

在最新版本的datatables / CDN中，它又有所不同。

table.dataTable thead .sorting:after
{
    display: none;
}

隐藏筛选器。

敬礼

- Nicky Thomas