- ベストアンサー
AJAXでページング
下記サンプルに、ページング処理を追加したいのですが、 どうすればよいでしょうか？ http://www.atmarkit.co.jp/fdotnet/jqueryref/08ajax1/ajax1_08.html
- re999
- お礼率61% (476/777)
- JavaScript
- 回答数6
- ありがとう数4
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
IE8だと、「条件コンパイルは中止されます」とエラー表示になってしまいます。 ＝＞＠マークが条件コンパイルのマークアップと判断されてるみたいです。 その場しのぎで対処しました。 var ResultSets = []; $.each(data,function(index,value){ ResultSets.push(value); }); var hits= parseInt(ResultSets[0].totalResultsAvailable); var currentItem = parseInt(ResultSets[0].firstResultPosition);
その他の回答 (5)
- yyr446
- ベストアンサー率65% (870/1330)
おそらく、 data.@attributes.totalResultsAvailable とか data.@attributes.firstResultPosition の＠にIEが反応してしまっているのかなあ？ 配列index番号アクセスにすればよいかも、試してみます。
- yyr446
- ベストアンサー率65% (870/1330)
サンプルが長くなっちゃたんで、しきりなおして、Object施工を図り、解り易いソースに書き直してみたぞ。 例によって、ここ↓にアップした。 https://gist.github.com/767710
補足
「回答ありがとうございます」＆「スクリプトを作成いただき、大変恐縮です」 早速、デモページを拝見させていただいたのですが、 IE8だと、「条件コンパイルは中止されます」とエラー表示になってしまいます。 (ちなみに、FireFoxでは、ちゃんと正常にページングされてました) これは、どのように対処したらよいでしょうか？
- yyr446
- ベストアンサー率65% (870/1330)
続き function dataout(data){ $('#result').empty(); var hits= parseInt(data.@attributes.totalResultsAvailable); var itemPerPage = 10; var pages=(hits % itemPerPage==0)?parseInt(hits/itemPerPage):parseInt(hits/itemPerPage)+1; var currentItem = parseInt(data.@attributes.firstResultPosition); var currentPage =parseInt(currentItem/itemPerPage); $('#result').append('<hr><span>＜検索結果＞ ' + hits +'件</span>'); //Page Navigation 書き出し部 var nextguide; if (pages<=10){ var pages=Math.min( (hits % itemPerPage==0)? parseInt(hits/itemPerPage): parseInt(hits/itemPerPage)+1,10); nextguide = NaviMenuAdd(pageset,pages,itemPerPage); }else{ nextguide = NaviMenuAdd(pageset,10,itemPerPage); var nextp =$(document.createElement("a")); nextp.attr({href:"javascript:void(0);"}); nextp.text(">>"); nextp.bind("click",function(event){ event.preventDefault(); pageset=pageset+1; Go_Search(pageset*10*itemPerPage+1); }); nextguide.append(nextp); if (pageset>0){ var prevp =$(document.createElement("a")); prevp.attr({href:"javascript:void(0);"}); prevp.text("<<"); prevp.bind("click",function(event){ event.preventDefault(); pageset=pageset-1; Go_Search(pageset*10*itemPerPage+1); }); nextguide.prepend(prevp); } } $('#result').append(nextguide); $('#result > span > a').css({margin:"5px",color:"black",background:"#cff"}); if (pageset>0){ $('#result > span > a:eq('+ (currentPage%10+1) + ')').css("background","yellow"); }else{ $('#result > span > a:eq('+ currentPage%10 + ')').css("background","yellow"); } //結果リスト書き出し部 var result = '<ul>'; $.each(data.Result, function(index,value){ result += "<li><a href='" + value.Url + "'>" + value.Title + "</a></li>"; }); result += "</ul>"; $('#result').append(result); } }); </script> </head> <body> <form> <input type="text" id="keywd" /> <button type="button" id="btn">検索</button> <div id="result"></div> </form> </body> </html>
- yyr446
- ベストアンサー率65% (870/1330)
とりあえず、ベタコーディングのサンプル ※全角空白は半角空白に直してね！ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Yahoo Blog Search API Test</title> <style type="text/css"></style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.4");</script> <script type="text/javascript"> $(function(){ var pageset = 0 $("#btn").click(function(){ //myNavi.pageset = 0; Go_Search(1); }); function Go_Search(start){ $.getJSON('http://search.yahooapis.jp/BlogSearchService/V1/blogSearch?callback=?', {appid:"ここにあなたのYahooAplivationidを入れて", output:"json", query: $('#keywd').val(), results:10, start:start },dataout); } function NaviMenuAdd(pageset,pages,itemPerPage){ var start=pageset*10; pages=pages+start; var nextguide=$(document.createElement("span")); for(var i=start;i<pages;i++){ var startItem = i*itemPerPage +1; var nexta =$(document.createElement("a")); nexta.attr({href:"javascript:void(0);"}); nexta.text((i+1)+"頁目"); nexta.bind("click",{start:startItem},function(event){ event.preventDefault(); Go_Search(event.data.start); }); nextguide.append(nexta); } return nextguide; } 回答欄が足りないので続きます。
- yyr446
- ベストアンサー率65% (870/1330)
サンプルだと「Yahoo!ブログ検索API」サービスを使ってますけど、このAPIでのページング処理だと、ページング単位をｎ件（最大50件ですね） resultsにｎをセット、startに 1 + ｎ×（ページ数-1）をセット（最大1000まで）して 毎回処理結果を得ていけばよいですね。 リクエストする度にページングナビゲーション部分をDOM関数で、動的に作っていって、 現在どのページかわかるようにしてあげればよろしいかと。
お礼
修正ありがとうございました。 おかげで、IE8, Google Chromeでも、無事、動作確認できました。 また、今回は、この質問のために、貴重なお時間を割いていただき、 ホントにありがとうございました。 なお、コードの中身等については、これから理解していきたいと思っていますので、 出来れば、リンク先とか、デモページとか、もうしばらくこのままの状態でいただけると、ありがたいです。 また、別室サイトの方も拝見しましたが、色々、サンプルを掲載されているようなので、 参考にさせていただきます。 ではー。