朱丽叶

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

原生的js分页

function pagePagings(option) {
  
  let htmlStr = '';
  console.log(option.current,option.total,option.btnNums  );
  // 当前页
  let current = option.current || 1;
  // 总共多少页
  let total = option.total || 5;
  // 显示几个按钮
  let btnNums = option.btnNums || 5;

  // 回调函数
  let callBack = option.callBack || function () { };

  // 显示"首页",如果当前页大于等于4,而且总页数大于等于6
  // if (current >= 4 && total >= 6) {
  //   htmlStr += '<span onclick="searchsolrp(1);">首页</span>'
  // }

  // 显示"上一页",如果当前页大于等于2
  if (current >= 2) {
    htmlStr += '<span onclick="searchsolrp('+ (current - 1) +');">上一页</span>'
  };


  // 如果传入的总页数小于等于btnNums
  if (total <= btnNums) {
    // 循环
    for (let i = 1; i <= total; i++) {
      // 如果标签页为当前页
      if (current == i) {
        htmlStr += '<span class="hover" onclick="searchsolrp(' + i + ');">'+ i +'</span >'
      } else {
        htmlStr += '<span onclick="searchsolrp(' + i + ');">'+ i +'</span >'
      }
    }
    // 如果传入的总页数大于等于btnNums
  } else {

    for (let i = 1; i <= btnNums; i++) {
      // 如果当前页为第1页或是第2页时(不显示第-1页和第0页)
      if (current == 1 || current == 2) {

        if (current == i) {
          htmlStr += '<span class="hover" onclick="searchsolrp(' + i + ');">'+ i +'</span >'
        } else {
          htmlStr += '<span onclick="searchsolrp(' + i + ');">'+ i +'</span >'
        }
      // 如果总页数减去当前页等于0或者等于1(不显示第11和12页)
      } else if ((total - current) == 0 || (total - current) == 1) {

        // 如果总页数减去当前页为0以及当前循环遍历的i为5
        if ((total - current) == 0 && i == btnNums) {
          // 标签页的内容为total - btnNums + i(当前页为10,显示[6],[7],[8],[9],10)
          htmlStr += '<span class="hover" onclick="searchsolrp(' + (total - btnNums + i) + ');">'+ (total - btnNums + i) +'</span >'

          // 如果总页数减去当前页为1以及当前循环遍历的i为4
        } else if ((total - current) == 1 && i == 4) {
          htmlStr += '<span class="hover" onclick="searchsolrp(' + (total - btnNums + i) + ');">'+ (total - btnNums + i) +'</span >'
        } else {
          // 标签页的内容为total - 5 + i(正常显示,没有第11页和第12页
          htmlStr += '<span onclick="searchsolrp(' + (total - btnNums + i) + ');">'+ (total - btnNums + i) +'</span >'
        }

      } else {

        // 如果当前页在5个标签页的中间
        if (i == 3) {
        htmlStr += '<span class="hover" onclick="searchsolrp(' + (current - 3 + i) + ');">'+ (current - 3 + i) +'</span >'

        } else {
          // 内容为[current - 3 + i]
          htmlStr += '<span onclick="searchsolrp(' + (current - 3 + i) + ');">'+ (current - 3 + i) +'</span >'
        }
      }
      
    }
  }

  // 显示"下一页",总页数减去当前页大于等于1,即不是最后一页
  if ((total - current) >= 1) {
    htmlStr += '<span onclick="searchsolrp(' + (current + 1) + ');">下一页</span >'
  }

  // 显示"尾页",总页数减去当前页大于等于3时
  // if ((total - current) >= 3 && total >= 6) {
  //   htmlStr += '<span onclick="searchsolrp(' + total + ');">尾页</span >'
  // }


  return htmlStr;
}

posted on   朱丽叶  阅读(87)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示