Web制作の現場で使えるjQuery　UIデザイン入門 ― 第24回

jQueryとAjaxで作るスムーズページング

2009年12月17日 11時00分更新

文● 西畑一馬／to-R

※この記事は「Web制作の現場で使えるjQuery　UIデザイン入門」の第24回です。過去の記事もご覧ください。

　Googleの検索結果のように、長いリスト項目を複数のページに分割して表示することを「ページング」（Paging）と言います。ページング処理では下部にナビゲーションリンクを配置し、クリックされた番号のページを表示しますが、ページ全体をリロードして切り替えるには時間がかかります。そこで今回は、スムーズにページングさせるためにAjaxを利用して更新が必要な部分のみを外部ファイルから読み込んで書き換え、ユーザーのストレスを軽減する方法を紹介しましょう。

今回制作するサンプル


（画像クリックでサンプルページを表示します）

データのHTMLを用意する

　今回は、数が多い商品情報のリストを複数のページに分割して表示するサンプルを作成します。はじめにAjaxで読み込むコンテンツデータを用意します。Ajaxは、XMLやJSON（JavaScript Object Notation）、テキストなどさまざまデータを扱えますが、今回はもっとも手軽なHTMLを使いましょう。コンテンツデータのHTMLは1ページ目を「data1.html」、2ページ目を「data2.html」として作成します。


データのHTMLは1ページ目を「data1.html」、2ページ目を「data2.html」として用意する

　データのHTMLは次のようになります。Ajaxだからといって特別な記述はありません。id属性に「content」を設定したdiv要素を配置し、その内側に表示したい内容を記述していきます。ここでは、商品情報1件ごとにclass属性「colmun」を設定したdiv要素で包んでいます。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>data1</title>
    </head>
    <body>
        <div id="content">
            
            <div class="colmun">
                <div class="img">
                    <a href="http://asciimw.jp/search/?isbn=978-4-04-868064-6">
                        <img height="80" width="56" alt="" src="./images/978-4-04-868064-6s.jpg"/>
                    </a>
                </div>
                <div class="info">
                    <h2>雲の世界の向こうをつかむクラウドの技術</h2>
                    <ul>
                        <li>発売日 ： 2009/11/06</li>
                        <li>定価 ： 1,890円</li>
                        <li>ISBN ： 978-4-04-868064-6</li>
                    </ul>
                </div>
            </div>
            
            (中略)
            
            <div class="colmun">
                <div class="img">
                    <a href="http://asciimw.jp/search/?isbn=978-4-04-868098-1">
                        <img height="80" width="56" alt="" src="./images/978-4-04-868098-1s.jpg"/>
                    </a>
                </div>
                <div class="info">
                    <h2>完全合格 ORACLE MASTER Bronze DBA11g 直前対策暗記ノート</h2>
                    <ul>
                        <li>著者 ： 有里恵、沢野次男</li>
                        <li>発売日 ： 2009/09/30</li>
                        <li>定価 ： 1,554円</li>
                        <li>ISBN ： 978-4-04-868098-1</li>
                    </ul>
                </div>
            </div>
            
        </div>
    </body>
</html>