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

jQueryとAjaxで作るスムーズページング (3/3)

　スクリプト部分は次のようになります。

▼サンプル01（スクリプト部分）

$(function(){
    
    $("#content").load($("ul.pager li a:first").attr("href")+" #content");
    $("ul.pager li a:first").addClass("selected");
    
    $("ul.pager li a").click(function(){
        
        $("#content").html('<p class="loading"><img src="images/loading.gif" alt="" /></p>');
        
        $("#content").data("file",$(this).attr("href"));
        
        $('html,body').animate({ scrollTop: $("h1").offset().top-20 }, 'slow','swing',function(){
            $("#content").load($("#content").data("file")+" #content");
        })
        
        $("ul.pager li a").removeClass("selected");
        $(this).addClass("selected");
        return false;
    })
    
})

　最初の2行目～3行目はページの初期表示状態を設定をしています。ul.pager内の1番目のa要素のhref属性をattr()で取得し、「 #content」を連結します。これで「data1.html #content」という1ページ目のデータファイルのパスができ上がりますので、load()（関連記事）を使って読み込み、#content内に挿入します。

$("#content").load($("ul.pager li a:first").attr("href")+" #content");

　次に、現在表示中のページ番号が分かるように、1番目のナビゲーションリンク（ul.pager li a:first）に先ほどCSSを定義したclass属性「selected」を設定します。

$("ul.pager li a:first").addClass("selected");

　Ajaxでページングする処理は、各ページのリンクにclickイベントで設定します。a要素にclickイベントを設定する場合はreturn falseを忘れずに記述しましょう(関連記事)。

$("ul.pager li a").click(function(){
    
    return false;
})

　clickイベントでは、まずhtml()(関連記事)で#contentの内容をローディングアイコンに差し替えます。ローディングアイコンはデータの読み込みが終わるまでの間、表示されます。

$("#content").html('<p class="loading"><img src="images/loading.gif" alt="" /></p>');

　次にdata()(関連記事)を使って、クリックされたa要素のhref属性の値を「file」という名前で保存します。

$("#content").data("file",$(this).attr("href"));

　続いてanimate()でページ内スクロール(関連記事)を設定し、ページ上部に画面を移動させます。animate()のコールバック関数内にload()を記述し、#contentの内容をdata("file")に保存したパスの#contentと差し替えます。

$('html,body').animate({ scrollTop: $("h1").offset().top-20 }, 'slow','swing',function(){
    $("#content").load($("#content").data("file")+" #content");
})

　最後に、ナビゲーションリンクからいったんclass属性「selected」を取り除き、新たにクリックされたa要素に「selected」を追加します。

$("ul.pager li a").removeClass("selected");
$(this).addClass("selected");

　以上でAjaxを使ったスムーズなページング処理が完成しました。

【クライアントのわがままに応える！】

もっと大量のデータをAjaxで表示したい！

　サンプル1は商品情報を外部のHTMLからAjaxで読み込んで表示しました。数件の商品情報であればこれでも構いませんが、大量の商品情報を扱う場合にはあまり現実的な方法ではありません。むしろ、実務上はデータベースからデータを取得して表示することが多いでしょう。たとえば、Webブラウザー側からのGETリクエストに対応して情報を送信できるプログラムをサーバー側に用意しておき、ナビゲーションリンクを以下のようなパラメーター付きのURLに変更します。

<ul class="pager">
    <li><a href="data.php?page=1">1</a></li>
    <li><a href="data.php?page=2">2</a></li>
    <li><a href="data.php?page=3">3</a></li>
</ul>

　ほかにも、XMLやJSONなどのデータを取得して表示する場合もあります。システムを担当するエンジニアと相談しながら要件に応じて柔軟に対応しましょう。

著者：西畑一馬（にしはた かずま）

to-R代表、Webクリエイター。PHPによるシステム開発や、CMSを利用したWebサイト制作、SEO対策などのマーケティング、コンサルティング、Webクリエイター向けの講座などを業務で行なっている。また、ブログto-RではJavaScriptやSEO対策、CSS、Movable TypeなどのWeb制作にかかわるさまざまな情報を発信している。
主な著書に「現場のプロから学ぶXHTML+CSS」（共著、毎日コミュニケーションズ刊）がある。