My puppyのブログ

40代前半で横浜在住の日曜プログラマです。学んだ事や作っているプログラムなどについて書いています。

「TED Talks List」でソートや検索が出来るようにしました(English-Video.net)

今日は仕事が休みだったので、午後からEnglish-Video.netの「TED Talks List」でソート(並べ替え)や検索が出来るようにしていました。

ちなみにこれらは「DataTables」というjQueryプラグインで実現しています。

まずはソート機能です。

具体的には下の画像の赤丸の部分をクリックするとソートできます。

f:id:ken_tokyo:20170926091710p:plain

この画像では表の見出しの「DURATION」をクリックして、動画の再生時間が短い順にソートしています。

このほかにも「NO.」や「ID」、「TITLE」など各見出しをクリックすることによって、昇順/降順にソートすることができます。

次は検索機能です。

下記画像の赤丸内のように「TED Talks List」でテキストボックス内に「ビル ゲイツ」などと入力すると、表の内部をリアルタイムに検索できます。

f:id:ken_tokyo:20170926091447p:plain

ただこの場合「ビル」と「ゲイツ」の間のスペースが全角だとうまく動きません。スペースを入力する時は半角でお願いいたします。

この不具合は時間がある時に修正したいと思います。

ちなみにこの検索機能は表の内部の文字列ならなんでも検索できるので、たとえば下の画像の赤丸内のように「06:」と検索すれば、再生時間が「06:00」から「06:59」までの動画をすべて列挙できます。

f:id:ken_tokyo:20170926092032p:plain

今作成したばかりなので不具合などもあるかもしれませんが、もしなにかございましたらこのブログへコメントをお願いいたします<m(__)m>