Pei's Lab

NEW ARTICLE
Twitter APIがひどすぎる

DataTablesのnowrapが効かない

DataTablesのnowrapが効かない

Bootstrap4 + DataTablesの組み合わせにおいて、DataTablesの特定の機能が正しく動作しない場合がありました。
原因は不明のままですが、対策を盛り込んだので紹介します。

目次

現象

見た目を整えるオプションを設定しても反映されない。
具体的には”dt-nowrap”というオプションが動作しませんでした。同様に”dt-body-nowrap”,”dt-head-nowrap”,”dt-center”なども動作しませんでした。

対策

cssファイルに下記コードを追加

css

/*thは"-nowrap"と"-head-nowrap"の時に反映する*/
th.dt-nowrap{
white-space: nowrap;
}

th.dt-head-nowrap{
white-space: nowrap;
}

/*tdは"-nowrap"と"-body-nowrap"の時に反映する*/
td.dt-nowrap{
white-space: nowrap;
}

td.dt-body-nowrap{
white-space: nowrap;
}

これはnowrapの場合の例です。”dt-center”などもコピペして調整すれば使用できると思います。

詳細

スタイリングオプション

スタイリングオプションについては下記の公式マニュアルに記載があります。

datatables.net
 
Default styling options
https://datatables.net/manual/styling/classes

テーブルを生成するJavaScriptコードのなかでオプションを設定することで、折り返し無効化・罫線の設定・センタリングなどが行えるようになっています。とは言っても中身は、HTMLのthタグとtdタグにクラスを設定しているだけです。あとは、設定されたクラスを元にcssで見た目を整えているようです。

コード例

javascript

$(function() {
$("#event-table").DataTable({

// 件数切替無効化
lengthChange: false,

// ページング無効化
paging: false,

// デフォルトのソート指定
order: [ [ 1, "asc" ] ],

// ここがスタイリングオプション
columnDefs: [
// 一列目はヘッダーもデータも折り返し無効化
{targets: [0], className: 'dt-nowrap'},

// ２〜３列目はヘッダーだけ折り返し無効化
{targets: [1,2], className: 'dt-head-nowrap'},
]
});

若干ややこしいのですが、”dt-head-nowrap”を指定した場合でもthタグ・tdタグの両方に”dt-head-nowrap”クラスが付与されます。同様に”dt-body-nowrap”を指定した場合でもthタグ・tdタグの両方に”dt-body-nowrap”クラスが付与されます。したがって、冒頭のcssコードに示すようにthタグ用とtdタグ用にそれぞれcssを用意する必要があります。

参考にhtmlのhead部分も載せます。
html

<head>
<link rel="stylesheet" href="/static/css/bootstrap.css">
<link rel="stylesheet" href="/static/css/stylesheet.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.js"></script>
</head>

jqueryやdatatablesはネット経由で参照しています。boostrapはローカルに保存して読み込んでいます。分けていることに深い理由はありません。bootstarpのバージョンはv4.0.0です。

実際の動作については私が開発を担当しているwebアプリケーションをご覧ください。
（今後のアップデート次第では、上記コードが変更になる可能性があります。）

camko.net
Camko
https://camko.net/schedule/東京オートサロン２０２０
カメラマン支援サイトです。カメラマンとモデルを繋げます。

まとめ

以上のように、”dt-nowrap”オプションがうまく動作しなかったので、datatablesのclassを付与する機能だけ使用して、cssコードは自分で書くという力技で実装しました。
datatablesは読み込み方法がいくつかあるので、おそらく参照しているコードがそもそも間違っているというのが本質だと思います。