web-dev-qa-db-ja.com

jQuery DataTablesの並べ替え矢印を削除する

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>
jquerycssdatatables
29
user2571510

アイコンは、CSSクラスでbackground : url(..)として定義されます。無効にする：

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

jsfiddleを参照->http://jsfiddle.net/5V2Dx/注：このソリューションはデータテーブル1.9.x用です！ ！

更新。 datatables 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）

41
davidkonrad

提示されたソリューションはどれも私にとってはうまくいきませんでした。しかし、私はこれを見つけました。

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

PS .: DataTablesバージョン"datatables": "~1.10.2"

24
Renato Gama

以下のようなデータテーブルプロパティを使用できます。データテーブルの列からソートアイコンが非表示になります。

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

DataTablesの新しいバージョンの場合：

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

矢印には特定のクラスが関連付けられています。次のCSSを使用して、これらの要素を非表示にできます。

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

クイックトリック（これにより並べ替えボタンが非表示になりますが、機能は引き続き機能します）：-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']）に設定されているためです。この「迷惑な」デフォルトを無効にするには、もう1つのオプション「order」を追加します。

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

（DataTables 1.10）必要ない場合、順序を無効にすることは、矢印コントロールが表示されないようにする1つの方法です。 "ordering"オプションを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

3
Logan Hoerth

これは私のために働いたものです

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

CSSを使用する：

.DataTables_sort_icon { display:none;}
2
A. Wolff

データテーブル/ CDNの最新バージョンでは、これもまた異なります

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

フィルターを非表示にします。

よろしく

1
Nicky Thomas

例：

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

これにより、矢印が表示されずに列がソート可能になります。

1
aseesh

_data-sortable="false"_タグで_<th>_属性を使用してから、JSでclickトリガーを使用してremoveAttribute("class");を実行しないのは、これはすべて少し複雑に思えます。

1
BeNice

これは私のために働いた。

 #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; 
    }
0
Shahid Chaudhary

私の場合、これはうまくいきました。

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

このスタイルをページに追加します

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

フォルダ内のアイコン画像も（新しいCSSを追加する代わりに）実際に削除できます。

DataTables-1.10.16\images

enter image description here

0
GMsoF

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;
}
0
ruchit
$('#sample_1 thead tr th:first-child').removeClass('sorting');
0
Sagar Mali

これにより、カスタムアイコンのデフォルトの並べ替えアイコンを変更できます。これは、上記の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; }
0
ScottLenart

CSSクラス_sorting_asc_および_sorting_desc_はアイコンをもたらします。

特定のテーブルの修正をローカライズする最も簡単なソリューションは、テーブルが初期化されたら、fnInitCompleteで次のことを行います。

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

0
user2310848

列から並べ替えアイコンを非表示にする別の解決策があります。ヘッダーにcssクラスを適用してみましょう。

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

スタイルでCSSクラスを定義します

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

このソリューションは、jquery datatableバージョン1.10以降で機能し、テストされました。

0
Tahir Alvi

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

「th」要素を含めます。

0
Cristian A. Rodríguez Enríquez