HTMLのtable︵表組み︶を使って、Webサイトにさまざまなデータを表示する機会は多くあります。たとえば、サークルのWebサイトを作った時に、メンバーの名前や年齢などをまとめたリストを公開するとしましょう。このとき、Webサイトを訪れたユーザーが、自分の見たい順番に行を並べ替えられたら便利なのに……といったことはありませんか?
そこで試してみたいのが、表の並び替え︵ソート︶を実現するJavaScriptライブラリです。並び替え機能を持つJavaScriptライブラリは数多くありますが、その中から高機能で使いやすい﹁DataTables﹂を紹介しましょう。DataTablesを使えば、サーバーサイド技術の力を借りずに、HTMLとJavaScriptだけでリッチな表を作れます。
並び替えを簡単に実現する﹁DataTables﹂
DataTablesは、並び替えをはじめとして、table要素にさまざまな機能を追加するJavaScriptライブラリです。jQueryのプラグインですので、jQueryとともに使います。 DataTablesは、以下のアドレスからダウンロードできます。 http://datatables.net/
この記事の公開時点で、DataTablesの安定版の最新バージョンは1.4.3で、β版の最新は1.5β7でした。ページ右上の﹁Download﹂のリンクをクリックすると、安定版の最新バージョンのダウンロードが始まります。
ダウンロードしたファイルを展開すると、﹁media﹂というフォルダと、デモのHTMLファイルができます。このうち、mediaフォルダを、DataTablesを設置するサーバーにアップロードしてください。DataTablesの1.4.3には、mediaフォルダにjQuery︵jquery.js︶の1.3.1が含まれているので、別途jQueryを用意する必要はありません。
![](/img/blank.gif)