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

前端技术 2023/09/08 JavaScript

复制代码 代码如下:

(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);

本文地址：https://www.stayed.cn/item/21374

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案