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

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

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

参见jsfiddle - ＆gt; 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;
}

参见 - ＆gt; 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：

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

Answer 5

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

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

Answer 6

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

＆＃13;

.no-sort::after { display: none!important; }

.no-sort { pointer-events: none!important; cursor: default!important; }

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

但是如果你在第一栏中将可订购设置为假，那么这项工作就不会完美。排序功能将停止，但按钮仍然存在。因为默认情况下，第一列设置为按升序排序（＆＃39;顺序＆＃39;：[[0，＆＃39; asc＆＃39;]）。要禁用此功能，请“烦恼”默认情况下，再添加一个选项：＆＃34; order＆＃34;：

＆＃13;

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

＆＃13;

Answer 7

（由于 DataTables 1.10 ）如果您不需要它，禁用排序是阻止箭头控件出现的一种方法。通过将＆＃34;排序＆＃34; 选项指定为 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

Answer 8

这对我有用

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

Answer 9

使用CSS：

.DataTables_sort_icon { display:none;}

Answer 10

示例：

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

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

Answer 11

Unable to find modules for some sources, this is usually the result of either a bad import, a missing dependency in a package (or possibly a dev_dependency needs to move to a real dependency), or a build failure (if importing a generated file).

Please check the following imports:

`import 'generated_plugin_registrant.dart';` from flutterapp|lib/util/text_util_web_entrypoint.dart at 5:1

Failed after 91ms

使用DT 2.2.3在我的机器上工作

Answer 12

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

Answer 13

在最新版本的datatables / CDN上，它又是不同的

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

隐藏过滤器。

此致

Answer 14

下一个代码对我有用：

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

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

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

使用相同的方法禁用下降箭头。

和平！

Answer 15

我没有在以前的答案中看到的一种方法，并且我认为最好的方法是使用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选项仍然是有效的。

Answer 16

还有一个其他解决方案可以隐藏列中的排序图标，将css类应用于标题，例如，

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

并以样式

定义css类

.sorting_disabled
{
   background-image:none !important;
}

此解决方案适用于jquery数据表版本1.10 +

Answer 17

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

DataTables-1.10.16\images

Answer 18

将此样式添加到您的页面

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

Answer 19

放在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;
}

Answer 20

CSS类sorting_asc和sorting_desc带有图标。

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

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

Answer 21

这对我有用。

 #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; 
    }

Answer 22

就我而言，这很好。

{{1}}

Answer 23

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

.dataTable > thead > tr > th[class*="sort"]::after{display: 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; }

Answer 24

对于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;
}

包括＆＃34; th＆＃34;元件。

删除jQuery DataTables中的排序箭头

25 个答案: