web-dev-qa-db-ja.com

DataTable固定ヘッダーが機能しない

datatables プラグインを使用したテーブルがあります。

テーブルヘッダーを修正して、このリンクをたどろうとしています： here

$('.device-table').DataTable( {
    "fixedHeader": {
        header: true,
    },
    "bLengthChange": false,
    "Filter": false,
    "Info": false,
} );

効果は見られません。

DatatablesのjsファイルとfixedHeaderの両方を含めました。

<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js" type="text/javascript"></script>

質問

どうやってこれをデバッグしますか？

現時点で提案をお待ちしています。

これに関するヒント/提案/ヘルプは大歓迎です！

javascriptjquerydatatableshtml-table
12
kyo

fixedHeaderプラグインを機能させるには、cssファイルも必要です。

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css">

この更新を確認してください：
https://jsfiddle.net/s2xbf9d0/6/

20
Dekel

フィドルにはdataTables.fixedHeaderプラグインとfixedHeader.dataTables CSSファイルがないため、ページが（固定ヘッダーで）適切にレンダリングされていません。

Working DEMO：- https://jsfiddle.net/s2xbf9d0/7/

お役に立てれば！

6
David R