jQuery/DataTables：删除排序箭头

我正在使用jQuery DataTables插件。jQuery/DataTables：删除排序箭头

有没有一种方法可以摆脱它们在标题中显示的小箭头以指示排序选项？我想保留这个功能，通过点击它按这个列排序的标题，我只是不想显示箭头图标，因为它们改变了我的列标题的布局。

萤火显示如下我的头：

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

与此的任何帮助，蒂姆非常感谢。

来源

2013-11-25 user2571510

的图标被定义为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/（更新演示使用数据表1.10.11）

来源

2013-11-25 15:23:43 davidkonrad

真棒 - 这reall Ÿ工作。：）非常感谢！ – user2571510

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

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

使用CSS：

.DataTables_sort_icon { display:none;}

来源

2013-11-25 15:10:09

无所提供的解决方案为我工作。但我刚刚找到了这个;

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

PS：数据表版本"datatables": "~1.10.2"

来源

2014-10-02 00:26:35 renatoargh

这是正确的答案。以上所有都不适合我。我有DataTables 1.10.10。 – Michal

+1;这是正确的答案**如果您正在使用[** dataTables Bootstrap样式插件**]（https://datatables.net/manual/styling/bootstrap）。 – davidkonrad

不得不补充：之前和之后： –

例子：

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

这将使此列排序，而不显示箭头的。

来源

2014-12-23 12:20:24 aseesh

对于数据表的新版本：

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

来源

2015-01-27 08:09:17

对于数据表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” 元素。

来源

2015-05-06 19:58:37

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

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

来源

2015-09-12 05:11:37

这将让你改变了默认的排序，自定义图标，这是我从伊尔沙德的后上方，从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; }

来源

2016-01-29 22:32:33 ScottLenart

在我的情况这工作得很好。

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

来源

2016-06-16 00:48:35 KBIIX

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

来源

2016-09-17 16:24:50 BeNice

谢谢！ data-sortable =“false”为我做了 – TrojanName

这对我来说

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

来源

2016-09-29 15:47:22 Bakly

这个工作对我工作。

“目标”：

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

来源

2016-11-18 08:19:31

您可以使用数据表的属性，如下面，它将从数据表中的列隐藏排序图标 “不排序”， “bSort”：假的， “ order“：[]

来源

2016-12-28 07:29:44

CSS类sorting_asc和sorting_desc带来了图标。

简单的解决方案，以本地化为特定表的修复，一旦表被初始化，在fnInitComplete，请执行下列操作：

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

来源

2017-04-20 13:29:44 user2310848

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

来源

2017-09-08 06:36:54

把下面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; 
}

来源

2017-09-28 05:25:25 ruchit07

在数据表的最新版本/ CDN它再次不同

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

隐藏的过滤器。

问候

来源

2017-10-03 13:59:19

这种风格添加到您的网页

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

来源

2017-11-20 11:33:00

（由于数据表1.10）如果你不需要它，禁用排序，以防止出现箭头控制的一种方式。通过将“订购”选件指定为false，在表初始化时执行此操作。

例：

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

JSFiddle

Documentation:

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

注意：根本没有排序。

另一种替代方法是禁用所有列的排序。然后，您可以设置与控制箭头（S）仅显示在排序列（S）编程订购：

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

JSFiddle

来源

2017-12-06 06:35:15

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

DataTables-1.10.16\images

来源

2017-12-15 07:39:45 GMsoF

有一个其他的解决办法来隐藏某列的排序图标，应用CSS类的标题让说，

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

，并定义CSS类的风格

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

这个解决方案的工作和测试jQuery数据表版本1.10+

来源

2018-02-08 08:18:12

jQuery/DataTables：删除排序箭头

回答

相关问题