Jquery単純ページング実装方法

2028 ワード

この例では、Jqueryの簡単なページングの実装方法について説明します.皆さんの参考にしてください.具体的には以下の通りです.
jsコード:

function dolistpage(pagerow,pagenum,rowcount,pagecount){
 $("#pagemsg").html("    "+pagerow+" ,  " + pagenum + "/" +pagecount + "   " +rowcount + " ");
 if (pagenum == 1) {
  $("#fpbtn").attr("disabled", true);
  $("#rpbtn").attr("disabled", true);
 }else {
  $("#fpbtn").removeAttr("disabled");
  $("#rpbtn").removeAttr("disabled");
 }
 if (pagenum == pagecount) {
  $("#npbtn").attr("disabled", true);
  $("#lpbtn").attr("disabled", true);
 }else {
  $("#npbtn").removeAttr("disabled");
  $("#lpbtn").removeAttr("disabled");
 }
 $("#fpbtn").click(function(){
  loadtpage(1);
 });
 $("#rpbtn").click(function(){
  loadtpage(pagenum - 1);
 });
 $("#npbtn").click(function(){
  if ((pagenum + 1) >= pagecount) 
   loadtpage(pagecount);
  else
   loadtpage(pagenum + 1);
 });
 $("#lpbtn").click(function(){
  loadtpage(pagecount);
 });
 $("#gpbtn").click(function(){
  var tzys = $("#gpinput").val();
  var re = /^[1-9]+[0-9]*$/;
  if (tzys == null || tzys == undefined || tzys == '') {
   alert("       !");
   $("#gpinput").focus();
   return;
  }
  if (!re.test(tzys)) {
   alert("         !");
   $("#gpinput").focus();
   return;
  }
  if (tzys > pagecount) 
   tzys = pagecount;
  if (tzys <= 0) 
   tzys = 1;
  loadtpage(tzys);
 });
 $("#gpinput").val(pagenum);
}


HTMLコード:

現在0/0ページ
ジャンプ
ページ
本稿で述べたjqueryプログラム設計に役立つことを願っています.