アプリ版：「スタンプのみでお礼する」機能のリリースについて

AJAXでページング

解決済

  • 質問者：re999
  • 質問日時：
  • 回答数：6件

下記サンプルに、ページング処理を追加したいのですが、
どうすればよいでしょうか？
http://www.atmarkit.co.jp/fdotnet/jqueryref/08aj …

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (6件)

No.6ベストアンサー

  • 回答者： yyr446
  • 回答日時：

IE8だと、「条件コンパイルは中止されます」とエラー表示になってしまいます。



＝＞＠マークが条件コンパイルのマークアップと判断されてるみたいです。
その場しのぎで対処しました。

　var ResultSets = [];
　$.each(data,function(index,value){
　 ResultSets.push(value);
　});
　var hits= parseInt(ResultSets[0].totalResultsAvailable);
　var currentItem = parseInt(ResultSets[0].firstResultPosition);
    • good
    • 0
    • 件
通報する
この回答へのお礼

修正ありがとうございました。
おかげで、IE8, Google Chromeでも、無事、動作確認できました。


また、今回は、この質問のために、貴重なお時間を割いていただき、
ホントにありがとうございました。

なお、コードの中身等については、これから理解していきたいと思っていますので、
出来れば、リンク先とか、デモページとか、もうしばらくこのままの状態でいただけると、ありがたいです。

また、別室サイトの方も拝見しましたが、色々、サンプルを掲載されているようなので、
参考にさせていただきます。

ではー。

通報する
お礼日時：2011/01/08 00:13

No.5

  • 回答者： yyr446
  • 回答日時：

おそらく、


data.@attributes.totalResultsAvailable
とか
data.@attributes.firstResultPosition

の＠にIEが反応してしまっているのかなあ？
配列index番号アクセスにすればよいかも、試してみます。
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： yyr446
  • 回答日時：

サンプルが長くなっちゃたんで、しきりなおして、Object施工を図り、解り易いソースに書き直してみたぞ。



例によって、ここ↓にアップした。

https://gist.github.com/767710

この回答への補足

「回答ありがとうございます」＆「スクリプトを作成いただき、大変恐縮です」

早速、デモページを拝見させていただいたのですが、
IE8だと、「条件コンパイルは中止されます」とエラー表示になってしまいます。
(ちなみに、FireFoxでは、ちゃんと正常にページングされてました)

これは、どのように対処したらよいでしょうか？

補足日時：2011/01/07 14:41
通報する
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： yyr446
  • 回答日時：

続き


　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>
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： yyr446
  • 回答日時：

とりあえず、ベタコーディングのサンプル



※全角空白は半角空白に直してね！

<!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/ …
　　 {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;
　}

回答欄が足りないので続きます。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： yyr446
  • 回答日時：

サンプルだと「Yahoo!ブログ検索API」サービスを使ってますけど、このAPIでのページング処理だと、ページング単位をｎ件（最大50件ですね）


resultsにｎをセット、startに 1　+　ｎ×（ページ数-1）をセット（最大1000まで）して
毎回処理結果を得ていけばよいですね。

リクエストする度にページングナビゲーション部分をDOM関数で、動的に作っていって、
現在どのページかわかるようにしてあげればよろしいかと。
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報