删除 jQuery DataTables 中的排序箭头 [英] Remove sorting arrows in jQuery DataTables

问题描述

我正在使用 jQuery DataTables 插件.

有什么办法可以去掉标题中显示的小箭头以指示排序选项吗?我想保留通过单击按此列排序的标题的功能，我只是不想显示箭头图标，因为它们更改了我的列标题的布局.

Is there a way I can get rid of the little arrows they display in the headers to indicate sorting options ? I would like to keep the functionality that by click on a header it sorts by this column, I just dont want to display the arrow icons as they change the layout of my column headers.

Firebug 显示我的标题如下:

Firebug shows my headers as follows:

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

推荐答案

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

The icons is defined as background : url(..) on the CSS classes. Disable them by :

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

参见 jsfiddle -> http://jsfiddle.net/5V2Dx/ 注意:此解决方案是对于数据表 1.9.x!!

see jsfiddle -> http://jsfiddle.net/5V2Dx/ Note : This solution is for datatables 1.9.x!!

更新.使用数据表 1.10.x 时，用于重置标题图标的 CSS 有点不同:

Update. When using datatables 1.10.x, the CSS for resetting the header icons is a little bit different :

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

see -> http://jsfiddle.net/kqpv3ub9/(更新的演示正在使用数据表1.10.11)

这篇关于删除 jQuery DataTables 中的排序箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！