このページの本文へ

「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/

DataTalbes
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を用意する必要はありません。

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く