对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>