「DataTables」を使えば5行でできる

JavaScriptだけで表＜table＞を並び替え！

2009年04月15日 08時00分更新

文● 藤本壱

　HTMLのtable（表組み）を使って、Webサイトにさまざまなデータを表示する機会は多くあります。たとえば、サークルのWebサイトを作った時に、メンバーの名前や年齢などをまとめたリストを公開するとしましょう。このとき、Webサイトを訪れたユーザーが、自分の見たい順番に行を並べ替えられたら便利なのに……といったことはありませんか？

　そこで試してみたいのが、表の並び替え（ソート）を実現するJavaScriptライブラリです。並び替え機能を持つJavaScriptライブラリは数多くありますが、その中から高機能で使いやすい「DataTables」を紹介しましょう。DataTablesを使えば、サーバーサイド技術の力を借りずに、HTMLとJavaScriptだけでリッチな表を作れます。

並び替えを簡単に実現する「DataTables」

　DataTablesは、並び替えをはじめとして、table要素にさまざまな機能を追加するJavaScriptライブラリです。jQueryのプラグインですので、jQueryとともに使います。

　DataTablesは、以下のアドレスからダウンロードできます。

　http://datatables.net/


DataTablesのサイト（「An Example」の部分がDataTablesの例になっていて、実際に動作を試せます）

　この記事の公開時点で、DataTablesの安定版の最新バージョンは1.4.3で、β版の最新は1.5β7でした。ページ右上の「Download」のリンクをクリックすると、安定版の最新バージョンのダウンロードが始まります。

　ダウンロードしたファイルを展開すると、「media」というフォルダと、デモのHTMLファイルができます。このうち、mediaフォルダを、DataTablesを設置するサーバーにアップロードしてください。DataTablesの1.4.3には、mediaフォルダにjQuery（jquery.js）の1.3.1が含まれているので、別途jQueryを用意する必要はありません。

前へ 1 2 次へ

ツイートする