DataTablesが動かない理由

結構面倒な処理

PHPでデータをDBから取得、表示する。この時ページネーションを行うのは、定番だけど…。
よく出てくる割には、案外面倒な処理。

Bootstrapだと、表示用のCSSは用意されているけれど、ロジックは無い。
フレームワークだと、ライブラリで持っていることもあるけれど、サクッと動く感じではない。

で、DataTablesを利用するという流れになるわけなんだけど…。
jQueryのプラグインで、tableタグをtheadとtbodyに分けて記述し、プラグインを呼び出すだけで、最低限の表の処理（ソートや絞り込み）を行ってくれる。

まあ、数百行程度なら、充分な速度で動いてくれる。

フレームワークで利用してみる

次のプロジェクトのために、色々とテストを行っている。
今回のDataTablesも、事前のテストの一環。

さて、フレームワークを使って、DBからデータを吸い出し、同様にDataTablesを利用するようにcodeを書きなおしてみる。

ところが、表示してみても、何も反応してくれない。（全く動作していない感じ）

項目表示の部分に△▽が表示されるはずなんだけど、これが出てこない。

もちろん、検索窓も、表示件数の処理も…。

なぜだ〜。

ということで、基本に立ち返りサンプルコードでテスト。

うむ、問題なく動作している。

と、ここまで作業して気づいたことがある。

テーブルを出力するページは、ひな形classを作っておいて、コンストラクタでオブジェクト生成している。ページごとに異なる部分だけ、オーバーライドするようにしているのだけれど…

DBからデータを引っ張ってきて表示する時に、1列余分に追加して表示していた。
（表示・編集・削除のアイコンを付加していた）

この時、最上部の項目を出力していなかった。<th></th>が1つ不足している状態。

図のように「編集」という文字を出力するように付加してみたところ、DataTablesがちゃんと動作してくれた。

当たり前といえば…当たり前。

データをソートさせる列の列名が存在していないので、エラーを起こしているのだった。

う〜む、こんなところで躓くとは、疲れているのかな〜。

ちなみに、「多機能テーブルDataTablesを使う」を参考に、表示部分を日本語化しています。
個人で使用するのには問題ないけれど、お客さんが使うことを考えると、こういった細かいチェックは必要になるんでげす。