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：刪除排序箭頭

回答

相關問題