[CSS]感想文リンクの一覧ページをレスポンシブ化

広告

sorted演劇感想文リンクの劇団一覧ページを、見やすいテーブルに一覧化しました。(当社比((笑))

■Bootstrapを利用して、DATATABLESのPluginを利用。

目標としたのはレスポンシブ化をより簡単に行う為、ネット検索の結果以下のサイトにぶつかりました。英語ですが、やりたいことはかなり出来そうです。早速、サンプルを作ってみたところ、うまいこと動きそうです。

DataTables | Table plug-in for jQuery(英語)

まずは、ほぼそのままのレイアウトを利用して、一覧ページを作成しました。

→こんな感じ。 ちで始まる劇団/個人のリスト

(しかし、上のページの内容をほとんど理解していませんorz)

■ソート順に以外に苦労。隠しカラムで対応。

元々英語圏のひとを想定しているツールであり、日本語を利用している身として苦労がありました。五十音順のソートです。

このサイトでは、登録時に個別に劇団の名称のふりがなをデータとして登録して、その順番で並べているのですが、このDATATABLESツールは、あくまでも、表内にあるデータ項目の順番でしか並べ替えされません。

英語圏ならまだしも、日本語としては、劇団名をそのままでソートすると漢字等のよみがなが思い通りになりませんでした。結果として、左端にふりがなをいれる列を作り、その内容を<dsiplay = hidden>とすることで対応しました。

…かなり無理やりな解決方法です。もう少しスマートな方法をご存知の方いたら、是非助けて下さい。

 

また、同じくソート順に利用するつもりで、その劇団の公演数を入れようとしたのですが、ソートは数字としてではなく文字列としてソートされてしまうことが判明。やむなく、0埋めの数字にしました。セメテモノかっこつけで、BootstrapのBatchで色を付けてみましたたが、なんかいまいちですね。

 

 

広告

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です