web-dev-qa-db-ja.com

jQuery dataTableにソートアイコンが表示されない

JQuery dataTableプラグインを使用しようとしています。問題は、並べ替えアイコン（方向データが実際に並べ替えられるこの矢印）が表示されないことです。

私のコードは次のようになります。

$('#example').dataTable(
{
    "bPaginate": false,
    "bFilter": false,
    "oLanguage": { "sInfo": ""}        
}
);

およびHtml：

<table class="surfClass" cellspacing="1" id="example">

<thead>
<tr>
    <th width="120px">Name</th>
    <th width="120px">The hourly rate (points)</th>
    <th>Levels of referrals</th>
    <th>bonuses</th>
    <th width="70px">Payout minimum</th>
</tr>
</thead>
jquerydatatables
26
PsCraft

この問題が発生しました。CDMスクリプトをローカルマシンにコピーしたため、@ Matt2012が指摘しているように、イメージをもう正しく参照していなかったためです。したがって、私の解決策は、CSSファイルを更新して、保存した後、配置したいイメージを探すことでした。

この部分を参照してください：

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.png') no-repeat center right; }
table.dataTable thead .sorting_desc { background: url('/Content/images/sort_desc.png') no-repeat center right; }

table.dataTable thead .sorting_asc_disabled { background: url('/Content/images/sort_asc_disabled.png') no-repeat center right; }
table.dataTable thead .sorting_desc_disabled { background: url('/Content/images/sort_desc_disabled.png') no-repeat center right; }
39
John

この問題があり、必要なスタイルシートにリンクしていないことを発見するのに1時間かかりました。私の場合、私は持っていた：

<link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/minidatatables-bootstrap.css'}"/>

しかし、私も追加する必要がありました：

<link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/datatables-bootstrap.css'}"/>

並べ替えアイコンが表示されます。これはおそらくブートストラップのみのソリューションですが、この問題が発生している場合は、正しいスタイルシートがリンクされていることを確認してください。

13
Jeremy Goodell

Datatablesは、Firefoxでfirebugを使用するアイコンにSpriteを使用し、すべてよりもネットをクリックして、赤で表示されているものを探します。これは、アセットがロードされていないことを示します。 「/media/css/jui_themes/smoothness/images/ui-icons_888888_256x240.png」のような形式になっています。

私はデータテーブルプラグインが初期化されており、あなたが期待する他のすべてを見ていると仮定していますか？

これをご覧になるとよいかもしれません http://debug.datatables.net/ これは、このプラグインのデバッグに役立つブックマークレットです。

5
Matt2012

DataTablesで問題が発生するたびに、javascriptエラーが原因です。
また、追加してみることができます

"bSort": true,
3
xjx424

私にも問題がありました。独自のコンフィギュレータを使用して、必要なすべてのオプションをここに設定します https://datatables.net/download/.jsおよび.css必要なファイル。その後、両方のファイルに独自のホストされたCDNをダウンロードするか、使用できます

1
Khaled

BundleConfigを使用している場合は、次の参照を追加してください。

「〜/ Content/DataTables/css/dataTables.bootstrap4.css」、

1
Primoshenko

Bootstrap V4を使用する場合、追加の2つのcssを含める必要があります。

<link href="/bower_components/font-awesome/css/font-awesome.css"  rel="stylesheet">
<link href="/bower_components/datatables.net-plugins/integration/font-awesome/dataTables.fontAwesome.css"  rel="stylesheet">

詳細については、こちらをご覧ください link

1
Camilo Calderón Tapia

テーブルヘッダーテキストを<div>でラップすることで問題を修正しました。

<th><div>Date</div></th>
1
Onshop

私はただアップグレードされたJQueryデータテーブル、今はうまく動作します

0
Arun Prasad E S