■Bootstrapを利用して、DATATABLESのPluginを利用。
目標としたのはレスポンシブ化をより簡単に行う為、ネット検索の結果以下のサイトにぶつかりました。英語ですが、やりたいことはかなり出来そうです。早速、サンプルを作ってみたところ、うまいこと動きそうです。
DataTables | Table plug-in for jQuery(英語)
まずは、ほぼそのままのレイアウトを利用して、一覧ページを作成しました。
→こんな感じ。 ちで始まる劇団/個人のリスト
(しかし、上のページの内容をほとんど理解していませんorz)
■ソート順に以外に苦労。隠しカラムで対応。
元々英語圏のひとを想定しているツールであり、日本語を利用している身として苦労がありました。五十音順のソートです。
このサイトでは、登録時に個別に劇団の名称のふりがなをデータとして登録して、その順番で並べているのですが、このDATATABLESツールは、あくまでも、表内にあるデータ項目の順番でしか並べ替えされません。
英語圏ならまだしも、日本語としては、劇団名をそのままでソートすると漢字等のよみがなが思い通りになりませんでした。結果として、左端にふりがなをいれる列を作り、その内容を<dsiplay = hidden>とすることで対応しました。
…かなり無理やりな解決方法です。もう少しスマートな方法をご存知の方いたら、是非助けて下さい。
また、同じくソート順に利用するつもりで、その劇団の公演数を入れようとしたのですが、ソートは数字としてではなく文字列としてソートされてしまうことが判明。やむなく、0埋めの数字にしました。セメテモノかっこつけで、BootstrapのBatchで色を付けてみましたたが、なんかいまいちですね。