Js paging sample sharing for table and ul

  • 2020-03-30 02:06:48
  • OfStack


(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() {
   //Get all the information
   dCount = oSource.children().children().length;
   //Shimei  �   �   � 
   sPageStr = "<div class='ref'><a href='javascript:void(0)'  id='fresh_"
     + fresh_id
     + "' onClick='fresh(this.id);' class='sx' style='color:#247AA9;'><span> The refresh </span></a></div>";
   sPageStr += "  <div class='msdn'><a href='javascript:void(0)'> Home page </a><a href='javascript:void(0)'> The previous page </a><a href='javascript:void(0)'> The next page </a><a href='javascript:void(0)'> back </a></div>";
   sPageStr += "<div class='txt'>"+" A total of "+Math.ceil(dCount / dCountOfPage)+" page , The current first "+"<strong>"+dNowIndex+"</strong>"+" page "+"</div>";  
   oObj.html(sPageStr);
   dPageIndex = 1;
   //All forms and contents
   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 Be sure to show 
   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");
     }
    });
   }
   //Adds a pool event
   oObj.children().children().each(function() {
    $(this).click(function() {
       dNowIndex = $(this)[0].innerHTML;
       if (dNowIndex == ' Home page ') {
        dNowIndex = 1;
        change_page_content();
        nowIndex = dNowIndex;
       }
       if (dNowIndex == ' back ') {
        dNowIndex = Math.ceil(dCount / dCountOfPage);
        change_page_content();
        nowIndex = dNowIndex;
       }
       if (dNowIndex == ' The next page ') {
        if (nowIndex < Math.ceil(dCount / dCountOfPage)) {
         dNowIndex = parseInt(nowIndex) + 1;
         change_page_content();
         nowIndex = nowIndex + 1;
        }
       }
       if (dNowIndex == ' The previous page ') {
        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>


Related articles: