このページの本文へ

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>

Web Professionalトップページバナー

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

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

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