删除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>

Answer 1

图标定义为background : url(..)CSS类.禁用它们:

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

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

更新.使用数据表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)

Answer 2

所提出的解决方案都不适合我.但我刚发现了这个;

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

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

Answer 3

您可以使用如下所示的数据表属性,它将隐藏数据表列中的排序图标:

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

Answer 4

（自DataTables 1.10 起）如果您不需要它，禁用排序是防止出现箭头控件的一种方法。通过将“排序”选项指定为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

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.
});

Answer 6

对于新版本的DataTables:

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

Answer 7

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

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

Answer 8

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