首页 > 其他分享 >原生的js分页

原生的js分页

时间:2023-02-15 14:44:05浏览次数:32  
标签:原生 分页 当前页 js current htmlStr total btnNums option

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;
}

标签:原生,分页,当前页,js,current,htmlStr,total,btnNums,option
From: https://www.cnblogs.com/rzl795/p/17122912.html

相关文章