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

点评：本文主要介绍了js对table和ul li实现前台分页,感兴趣的朋友可以参考一下，希望对大家有所帮助！

复制代码 代码如下:

(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 = "<p class='ref'><a href='javascript:void(0)'  id='fresh_"

     + fresh_id

     + "' onClick='fresh(this.id);' class='sx' style='color:#247AA9;'><span>刷新</span></a></p>";

   sPageStr += "  <p 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></p>";

   sPageStr += "<p class='txt'>"+"共"+Math.ceil(dCount / dCountOfPage)+"页,当前第"+"<strong>"+dNowIndex+"</strong>"+"页"+"</p>";  

   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>