对table和ul实现js分页示例分享

复制代码代码如下:
（function（$） {
$.fn.tablepage = function（oObj, dCountOfPage, fresh_id） {
  var dPageIndex = 1;
  var dNowIndex = 1;
  var sPageStr = "";
  var dCount = 0;
  var oSource = $（this）;
  var sNoSelColor = "#CCCCCC";
  var sSelColor = "black";
  var sFontColor = "white";
  var nowIndex = 1;

change_page_content（）;

  function change_page_content（） {
   // 取得資料筆數
   dCount = oSource.children（）.children（）.length;
   // 顯示頁碼
   sPageStr = "<div class="ref"><a href="javascript:void（0）" id="fresh_"
     + fresh_id
     + "" onClick="fresh（this.id）;" class="sx" style="color:#247AA9;"><span>刷新</span></a></div>";
   sPageStr += " <div class="msdn"><a href="javascript:void（0）">首页</a><a href="javascript:void（0）">上一页</a><a href="javascript:void（0）">下一页</a><a href="javascript:void（0）">尾页</a></div>";
   sPageStr += "<div class="txt">"+"共"+Math.ceil（dCount / dCountOfPage）+"页,当前第"+"<strong>"+dNowIndex+"</strong>"+"页"+"</div>";
   oObj.html（sPageStr）;
   dPageIndex = 1;
   // 過濾表格內容
   var rr=oSource.children（）.children（"tr"）;
   oSource.children（）.children（"tr"）.each（function（） {
    // ==2
    if （dPageIndex >= （（（dNowIndex - 1） * dCountOfPage） + 1）
      && dPageIndex <= （（dNowIndex * dCountOfPage））） {
     $（this）.show（）;
    } else {
     $（this）.hide（）;
    }

dPageIndex++;
}）;

  // oSource.children（）.children（"tr"）.first（）.show（）; // head一定要顯示
   if（dCount<=dCountOfPage）{
    var tt=$（"#table_page_"+fresh_id）.children（".msdn"）.children（）.each（function（i） {
     if（i==2||i==3||i==0||i==1）{
      $（this）.addClass（"disabled"）;
     }
    }）;
   }
   else if（dNowIndex==Math.ceil（dCount / dCountOfPage））{
    var tt=$（"#table_page_"+fresh_id）.children（".msdn"）.children（）.each（function（i） {
     if（i==2||i==3）{
      $（this）.addClass（"disabled"）;
     }
    }）;
   }else if（dNowIndex==1）{
    var tt=$（"#table_page_"+fresh_id）.children（".msdn"）.children（）.each（function（i） {
     if（i==0||i==1）{
      $（this）.addClass（"disabled"）;
     }
    }）;
   }
   // 加入換頁事件
   oObj.children（）.children（）.each（function（） {

$（this）.click（function（） {

       dNowIndex = $（this）[0].innerHTML;
       if （dNowIndex == "首页"） {
        dNowIndex = 1;
        change_page_content（）;
        nowIndex = dNowIndex;
       }
       if （dNowIndex == "尾页"） {
        dNowIndex = Math.ceil（dCount / dCountOfPage）;
        change_page_content（）;
        nowIndex = dNowIndex;
       }
       if （dNowIndex == "下一页"） {
        if （nowIndex < Math.ceil（dCount / dCountOfPage）） {
         dNowIndex = parseInt（nowIndex） + 1;
         change_page_content（）;
         nowIndex = nowIndex + 1;
        }
       }
       if （dNowIndex == "上一页"） {
        if （nowIndex > 1） {
         dNowIndex = parseInt（nowIndex） - 1;
         change_page_content（）;
         nowIndex = nowIndex - 1;
        }
       }
      }）;
   }）;
  }
};
}）（jQuery）;

复制代码代码如下:
<script type="text/javascript">
$（document）.ready（ function（） {
var totalPage=$（"ul li"）.length;
var total = Math.ceil（$（"ul li"）.length / 5）;
var current = 1;
//var index =4;
if（totalPage>5）{
  $（"ul li:gt（4）"）.hide（）;
  $（"#btnPrev"）.attr（"class", "tabs-scroller-left-disabled"）.attr（"disabled", "disabled"）.click（ function（） {
   debugger;
   $（"#btnNext"）.attr（"class", "tabs-scroller-right"）;
   $（"#btnNext"）.removeAttr（"disabled"）;
   current -= 1;
   var tt=current;
   $（"ul li"）.show（）;
   var indexStart = （current - 1）;
   var indexEnd = indexStart + 4;
   $（"li:lt（" + indexStart + "）, li:gt（" + indexEnd + "）", $（"ul"））.hide（）;
   if （current == 1）{
    $（this）.attr（"class", "tabs-scroller-left-disabled"）;
    $（this）.attr（"disabled", "disabled"）;
   }
  }）;
  $（"#btnNext"）.click（ function（） {
   debugger;
   $（"#btnPrev"）.attr（"class", "tabs-scroller-left"）;
   $（"#btnPrev"）.removeAttr（"disabled"）;
   current += 1;
   $（"ul li"）.show（）;
   var indexStart = （current - 1）;
   var indexEnd = current + 4 > $（"ul li"）.length - 1 ？ $（"ul li"）.length - 1 : current +3;
   $（"li:lt（" + indexStart + "）, li:gt（" + indexEnd +"）", $（"ul"））.hide（）;
   if （current+4 >= totalPage）{
    $（this）.attr（"class", "tabs-scroller-right-disabled"）;
    $（this）.attr（"disabled", "disabled"）;
   }

  }）;
}else{
  alert（1）;
  $（"#btnPrev"）.attr（"class", "tabs-scroller-left-disabled"）;
  $（"#btnNext"）.attr（"class", "tabs-scroller-right-disabled"）;
}
}）;
</script>