#1です。
idがないのでこちらではテストしていませんが…
>ロード時には1ページ目を表示できるようにはできました。
>search('検索キーワード','ページ番号');
…で、ページ指定して取得できるのであれば、最初に検索を実行したときにヒット総数も取得できるはずですので、それを表示個数で割ればページ総数が計算できるはずです。
そのページ数に対してリンクを作成すればよいことになりますが、ヒット数が多いと(例えば1万とか)、一度にそれだけのリンクを表示するとものすごいことになってしまうので、現在表示中のページの前後で10ページ分だけをメニュー表示するなどのような工夫が必要かと思われます。
総数の取得は、例えば参考サイトのcallbackのようにdata(変数)で結果を受け取っているとすれば、data.Body.ItemSearch.countで取得できると思われます。
><body onload="search('検索キーワード','ページ番号')">
>では実行されません。
同じことなので実行できるはずですが、データを正しくセットしているでしょうか?
(キーワードやページ番号などが正しくセットされていますか?)
>さらに2ページ目、3ページ目と切り替えていく機能の実装方法で行き詰っている次第です。
serch()の部分が別途できてるとして、インデックスの表示と制御のごく簡単なサンプルを…
*単純な例なので、ページ数が多いときの表示制御はしていません。
*大きな総数を指定すると、多くのページインデックスが表示されますのでご注意。
みちのりが少々長そうな気はしますが、部分々々に分割して作成してゆけば可能かと思いますので、頑張ってください。
(全角空白は半角に)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
#index span{display:inline-block; width:2em; text-align:center; text-decoration:underline; cursor:pointer; }
#index span.active{background-color:#ddf; text-decoration:none; cursor:auto; }
//-->
</style>
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
<!--
function setIndex(maxCount, numOfItems){ //count総数, Itme表示数
var pages = Math.ceil(maxCount/numOfItems)+1;
var index = "", i;
for(i=0; ++i<pages;)
index += "\u003Cspan\u003E" + i + "\u003C/span\u003E";
$("#index").html(index)
.click(function(evt){
var t = $(evt.target);
if(t.hasClass("active")) return;
t.parent().children("span").removeClass("active");
t.addClass("active");
alert("page No = " + t.text()); //←ここで再読込みするなど
})
.children("span:first-child").addClass("active");
}
//テスト用のスクリプト(総数300、表示数30)
$(function(){
setIndex(300, 30);
});
//-->
</script>
</head>
<body>
<div id="index"></div>
</body>
</html>
補足
ご回答ありがとうございます。 すみません、質問が分かりにくかったと思います。どうやらイベントについての理解が浅いことが原因のようでして、恐れ入りますが、引き続きアドバイス頂けないでしょうか。 >「&page=ページ番号」を加えて番号を指定するのではできないのでしょうか? ページ番号は指定できます。ページ数を指定するような関数を作り、下記のようにHTMLロード時には1ページ目を表示できるようにはできました。 $(document).ready(function(){ search('検索キーワード','ページ番号'); }); ここからが問題で、さらに2ページ目、3ページ目と切り替えていく機能の実装方法で行き詰っている次第です。 「 1 | 2 | 3 | 4 | 5 | 6 | 」 ↑こんな感じのページ番号の切り替えリンクが作りたいと思います。まず、手動でHTMLでこのように記述したのですが、onclickイベントが発生していないのか、関数が実行されませんでした。 <div id="result"> <a href="javascript:void(0)" onclick="search('ケーキ', 1)"> 1 </a> | <a href="javascript:void(0)" onclick="search('ケーキ', 2)"> 2 </a> | <a href="javascript:void(0)" onclick="search('ケーキ', 3)"> 3 </a> | ・ ・ ・ </div> ↓最終的には検索キーワードを引き継いで、このように関数内にコードを記述したいのですが、現状やはりダメでした。 //ページ切り替えリンクを作る var result ='<p>ページ</p>' for (var i = 1; i <= page_count; i++) { result +='<a href="javascript:void(0)" onclick="search(' + keyword + ',' + i + ')" value="' + i + '" />' + i + '</a> | '; } // ID「result」の要素に流し込む $('#result').html(result); ちなみに一番最初に表示するときも、 $(document).ready(function(){ search('ケーキ','ページ番号'); }); や <form method="get" action=""> <input type="text" name="keyword" value="ケーキ" /> <input type="button" onclick="search(this.form.keyword.value,ページ番号);" value="検索" /> </form> ではsearch()関数が実行されているのに、 <body onload="search('検索キーワード','ページ番号')"> では実行されません。 すみませんが、正しい書き方をアドバイス頂けると助かります。 なにとぞよろしくお願いいたします。