下記サンプルに、ページング処理を追加したいのですが、
どうすればよいでしょうか?
http://www.atmarkit.co.jp/fdotnet/jqueryref/08aj …
No.6ベストアンサー
- 回答日時:
IE8だと、「条件コンパイルは中止されます」とエラー表示になってしまいます。
=>@マークが条件コンパイルのマークアップと判断されてるみたいです。
その場しのぎで対処しました。
var ResultSets = [];
$.each(data,function(index,value){
ResultSets.push(value);
});
var hits= parseInt(ResultSets[0].totalResultsAvailable);
var currentItem = parseInt(ResultSets[0].firstResultPosition);
修正ありがとうございました。
おかげで、IE8, Google Chromeでも、無事、動作確認できました。
また、今回は、この質問のために、貴重なお時間を割いていただき、
ホントにありがとうございました。
なお、コードの中身等については、これから理解していきたいと思っていますので、
出来れば、リンク先とか、デモページとか、もうしばらくこのままの状態でいただけると、ありがたいです。
また、別室サイトの方も拝見しましたが、色々、サンプルを掲載されているようなので、
参考にさせていただきます。
ではー。
No.5
- 回答日時:
おそらく、
data.@attributes.totalResultsAvailable
とか
data.@attributes.firstResultPosition
の@にIEが反応してしまっているのかなあ?
配列index番号アクセスにすればよいかも、試してみます。
No.4
- 回答日時:
サンプルが長くなっちゃたんで、しきりなおして、Object施工を図り、解り易いソースに書き直してみたぞ。
例によって、ここ↓にアップした。
https://gist.github.com/767710
この回答への補足
「回答ありがとうございます」&「スクリプトを作成いただき、大変恐縮です」
早速、デモページを拝見させていただいたのですが、
IE8だと、「条件コンパイルは中止されます」とエラー表示になってしまいます。
(ちなみに、FireFoxでは、ちゃんと正常にページングされてました)
これは、どのように対処したらよいでしょうか?
No.3
- 回答日時:
続き
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>
No.2
- 回答日時:
とりあえず、ベタコーディングのサンプル
※全角空白は半角空白に直してね!
<!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;
}
回答欄が足りないので続きます。
No.1
- 回答日時:
サンプルだと「Yahoo!ブログ検索API」サービスを使ってますけど、このAPIでのページング処理だと、ページング単位をn件(最大50件ですね)
resultsにnをセット、startに 1 + n×(ページ数-1)をセット(最大1000まで)して
毎回処理結果を得ていけばよいですね。
リクエストする度にページングナビゲーション部分をDOM関数で、動的に作っていって、
現在どのページかわかるようにしてあげればよろしいかと。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
C#OpenCv V4にのエラーに関する...
-
パス付きサイトのjavascript解析
-
イベントが初めの一回しか起き...
-
【西暦等の変換】
-
15パズルの作り方が分かりません!
-
ジェネレーターの作り方
-
javascriptの正規表現で変数を扱う
-
C#で、ContextMenuStripに動的...
-
javascriptで月末の日付を表示...
-
ASP.NETのコントロールの値をJa...
-
google apps scriptの終了のさせ方
-
選択範囲の取得と設定(JavaScript)
-
イベント座標の取り方について
-
JavaScriptでスライドショーを2...
-
JavaScriptの時計の表示
-
船のゲームを作っているのです...
-
gas スプレッドシートがアクテ...
-
JavaScriptのフォントの大きさ
-
JavaScriptの値を表示するには
-
JavaScriptエラーが出ます…
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
C#OpenCv V4にのエラーに関する...
-
食材の期限を管理するためにGAS...
-
google apps scriptの終了のさせ方
-
このプログラムに、王手をかけ...
-
このプログラムに王様の逃げ道...
-
この将棋プログラムに王様ゲッ...
-
ASP.NETのコントロールの値をJa...
-
ジェネレーターの作り方
-
GASでundefinedエラーが出ます
-
なぜmatchメソッドがエラーにな...
-
ASP.NET MVCでObjectをjsに渡す
-
C#で、ContextMenuStripに動的...
-
html javascript リンク先アド...
-
HTMLで作った時報アプリが動き...
-
翌月を取得するGASが分かりません
-
イラレでナンバリングする方法
-
HTMLにWSHを組み込む
-
gas スプレッドシートがアクテ...
-
getElementByIdでASP.NETのText...
-
APIを使って埋め込んだグーグル...
おすすめ情報