yyr446/jquery.AjaxPagingMenu.js

## jquery.AjaxPagingMenu.js
<!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 NaviMenu(container,itemPerPage,searchfunc){
 this.pageset = 0;
 this.container = container;
 this.doc = container.ownerDocument;
 this.itemPerPage = itemPerPage;
 this.searchfunc = searchfunc;
}

NaviMenu.prototype.set = function(hits,currentItem){
  var nextguide;
  var pages=(hits % this.itemPerPage == 0)?
   parseInt(hits / this.itemPerPage):parseInt(hits / this.itemPerPage) + 1;
  var currentPage =parseInt(currentItem / this.itemPerPage);
  $(this.container).append('<hr><span>＜検索結果＞ ' + hits + '件</span>');
  if (pages <= 10){
   var pages=Math.min(
    (hits % this.itemPerPage == 0)?
      parseInt(hits / this.itemPerPage):
      parseInt(hits / this.itemPerPage) + 1
    ,10);
    nextguide = this.Add(this.pageset,pages);
  }else{
   nextguide = this.Add(this.pageset,10);
   var nextp =$(this.doc.createElement("a"));
   nextp.attr({href:"javascript:void(0);"});
   nextp.text(">>");
   nextp.bind("click",{func:this.nextsearch,that:this},
    function(event){
     event.preventDefault();
     event.data.func(event.data.that);
   });
   nextguide.append(nextp);
   if (this.pageset>0){
    var prevp =$(this.doc.createElement("a"));
    prevp.attr({href:"javascript:void(0);"});
    prevp.text("<<");
    prevp.bind("click",{func:this.prevsearch,that:this},
     function(event){
     event.preventDefault();
     event.data.func(event.data.that);
    });
   nextguide.prepend(prevp);
   }
  }
  $(this.container).append(nextguide);
  $('> span > a',$(this.container)).css({margin:"5px",color:"black",background:"#cff"});
  if (this.pageset>0){
   $('> span > a:eq('+ (currentPage%10+1) + ')',$(this.container)).css("background","yellow");
  }else{
   $('> span > a:eq('+ currentPage%10 + ')',$(this.container)).css("background","yellow");
  }
};

NaviMenu.prototype.Add = function(pageset,pages){
  var start = this.pageset * 10;
  var pages = pages + start;
  var nextguide = $(this.doc.createElement("span"));
  for(var i=start;i<pages;i++){
   var startItem = i * this.itemPerPage + 1;
   var nexta =$(this.doc.createElement("a"));
   nexta.attr({href:"javascript:void(0);"});
   nexta.text((i+1) + "頁目");
   nexta.bind("click",
    {func:this.searchfunc,start:startItem,itemPerPage:this.itemPerPage},
    function(event){
     event.preventDefault();
     event.data.func(event.data.start,event.data.itemPerPage);
   });
   nextguide.append(nexta);
  }
  return nextguide;
};

NaviMenu.prototype.nextsearch = function(that){
 that.pageset = that.pageset + 1;
 that.searchfunc(that.pageset*10*that.itemPerPage + 1,that.itemPerPage);
};

NaviMenu.prototype.prevsearch = function(that){
 that.pageset = that.pageset - 1;
 that.searchfunc(that.pageset*10*that.itemPerPage + 1,that.itemPerPage);
};

$(function(){
 myNaviMenu = new NaviMenu($('#result').get(0),10,search);
 $("#btn").click(function(){
  search(1,10);
 });
 function search(start,itemPerPage){
  $.getJSON('http://search.yahooapis.jp/BlogSearchService/V1/blogSearch?callback=?',
   {appid:"wings-project",
    output:"json",
    query: $('#keywd').val(),
    results:itemPerPage,
    start:start
   },dataout);
 }

 function dataout(data){
  $('#result').empty();
/* プロパティアクセス演算子の Syntax は Identifier で IdentifierStart に "@" が
含まれていなければ SyntaxError
  var hits= parseInt(data.@attributes.totalResultsAvailable);
  var currentItem = parseInt(data.@attributes.firstResultPosition);
*/
/*
  var ResultSets = [];
 $.each(data,function(index,value){
   ResultSets.push(value);
 });
*/
  //var hits= parseInt(ResultSets[0].totalResultsAvailable);
  //var currentItem = parseInt(ResultSets[0].firstResultPosition);
  var hits= parseInt(data['@attributes'].totalResultsAvailable);
  var currentItem = parseInt(data['@attributes'].firstResultPosition);

  myNaviMenu.set(hits,currentItem);
  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>
<h1>Yahoo Blog Search API Test</h1>
<form>
<input type="text" id="keywd" />
<button type="button" id="btn">検索</button>
<div id="result"></div>
</form>
</body>
</html>
	<!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 NaviMenu(container,itemPerPage,searchfunc){
	this.pageset = 0;
	this.container = container;
	this.doc = container.ownerDocument;
	this.itemPerPage = itemPerPage;
	this.searchfunc = searchfunc;
	}

	NaviMenu.prototype.set = function(hits,currentItem){
	var nextguide;
	var pages=(hits % this.itemPerPage == 0)?
	parseInt(hits / this.itemPerPage):parseInt(hits / this.itemPerPage) + 1;
	var currentPage =parseInt(currentItem / this.itemPerPage);
	$(this.container).append('<hr><span>＜検索結果＞ ' + hits + '件</span>');
	if (pages <= 10){
	var pages=Math.min(
	(hits % this.itemPerPage == 0)?
	parseInt(hits / this.itemPerPage):
	parseInt(hits / this.itemPerPage) + 1
	,10);
	nextguide = this.Add(this.pageset,pages);
	}else{
	nextguide = this.Add(this.pageset,10);
	var nextp =$(this.doc.createElement("a"));
	nextp.attr({href:"javascript:void(0);"});
	nextp.text(">>");
	nextp.bind("click",{func:this.nextsearch,that:this},
	function(event){
	event.preventDefault();
	event.data.func(event.data.that);
	});
	nextguide.append(nextp);
	if (this.pageset>0){
	var prevp =$(this.doc.createElement("a"));
	prevp.attr({href:"javascript:void(0);"});
	prevp.text("<<");
	prevp.bind("click",{func:this.prevsearch,that:this},
	function(event){
	event.preventDefault();
	event.data.func(event.data.that);
	});
	nextguide.prepend(prevp);
	}
	}
	$(this.container).append(nextguide);
	$('> span > a',$(this.container)).css({margin:"5px",color:"black",background:"#cff"});
	if (this.pageset>0){
	$('> span > a:eq('+ (currentPage%10+1) + ')',$(this.container)).css("background","yellow");
	}else{
	$('> span > a:eq('+ currentPage%10 + ')',$(this.container)).css("background","yellow");
	}
	};

	NaviMenu.prototype.Add = function(pageset,pages){
	var start = this.pageset * 10;
	var pages = pages + start;
	var nextguide = $(this.doc.createElement("span"));
	for(var i=start;i<pages;i++){
	var startItem = i * this.itemPerPage + 1;
	var nexta =$(this.doc.createElement("a"));
	nexta.attr({href:"javascript:void(0);"});
	nexta.text((i+1) + "頁目");
	nexta.bind("click",
	{func:this.searchfunc,start:startItem,itemPerPage:this.itemPerPage},
	function(event){
	event.preventDefault();
	event.data.func(event.data.start,event.data.itemPerPage);
	});
	nextguide.append(nexta);
	}
	return nextguide;
	};

	NaviMenu.prototype.nextsearch = function(that){
	that.pageset = that.pageset + 1;
	that.searchfunc(that.pageset10that.itemPerPage + 1,that.itemPerPage);
	};

	NaviMenu.prototype.prevsearch = function(that){
	that.pageset = that.pageset - 1;
	that.searchfunc(that.pageset10that.itemPerPage + 1,that.itemPerPage);
	};

	$(function(){
	myNaviMenu = new NaviMenu($('#result').get(0),10,search);
	$("#btn").click(function(){
	search(1,10);
	});
	function search(start,itemPerPage){
	$.getJSON('http://search.yahooapis.jp/BlogSearchService/V1/blogSearch?callback=?',
	{appid:"wings-project",
	output:"json",
	query: $('#keywd').val(),
	results:itemPerPage,
	start:start
	},dataout);
	}

	function dataout(data){
	$('#result').empty();
	/* プロパティアクセス演算子の Syntax は Identifier で IdentifierStart に "@" が
	含まれていなければ SyntaxError
	var hits= parseInt(data.@attributes.totalResultsAvailable);
	var currentItem = parseInt(data.@attributes.firstResultPosition);
	*/
	/*
	var ResultSets = [];
	$.each(data,function(index,value){
	ResultSets.push(value);
	});
	*/
	//var hits= parseInt(ResultSets[0].totalResultsAvailable);
	//var currentItem = parseInt(ResultSets[0].firstResultPosition);
	var hits= parseInt(data['@attributes'].totalResultsAvailable);
	var currentItem = parseInt(data['@attributes'].firstResultPosition);

	myNaviMenu.set(hits,currentItem);
	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>
	<h1>Yahoo Blog Search API Test</h1>
	<form>
	<input type="text" id="keywd" />
	<button type="button" id="btn">検索</button>
	<div id="result"></div>
	</form>
	</body>
	</html>