仿boostrap 前端分页组件的实现

一  写一个前端自定义分页组件，需要考虑以下问题

  /*  
   需要一个<ul id="pagination"></ul>标签
   total; // 总数据的数量
   pageSize; // 一页显示数量
   pageIndex; // 当前页 
  */
 

二 实现细节

编写html文件   index.html 

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript分页</title>
</head>


<body>
<div>
<ul id="pagination"></ul>
</div>
<script src="./index.js"></script>
<script>
generatePagination(500, 10, 1,'/proudct');
</script>
</body>


</html>

　

实现生成的js   index.js

function generatePagination(total, pageSize, pageIndex, navUrl) {
  /* 创建style标签并设置style样式 */
  let style = document.createElement('style');
  style.innerHTML =
    '#pagination{width:100%;margin:30px;margin-bottom:0px;position:fixed;left:0;display:flex;padding-left:0;}#pageTips{position:fixed;left:10px;top:100px;font-size:15px;}ul li{list-style:none;display:inline-block;user-select:none;}.list-items{width:36px;height:36px;line-height:36px;text-align:center;background-color:#fff;color:#000;cursor:pointer;transition:all .3s;border:1px solid #dedede;border-right:none;border-radius:0px;}.list-items:hover{background-color:#e9ecef;border-color:#dee2e6;}.active,.active:hover{color:#fff;background-color:#337ab7;border-color:#337ab7;}.lbl{border-radius:5px 0px 0px 5px;color:#337ab7;border:1px solid #dedede;}.lbr{border-radius:0px 5px 5px 0px;color:#337ab7;border:1px solid #dedede;border-left:none}';
  document.getElementsByTagName('head').item(0).appendChild(style);

/*

需要一个<ul id="pagination"></ul>标签
total; // 总数据的数量
pageSize; // 一页显示数量
pageIndex; // 当前页
*/
let totalPage = Math.ceil(total / pageSize); // 总页数
function initPagination() {
let pagination = document.querySelector('#pagination');
let pageHtml; // 按钮内容
let prevButton = &lt;li class='list-items lbl' id='btnPrev'&gt;&lsaquo;&lt;/li&gt;; // 向左
let nextButton = &lt;li class='list-items lbr' id='btnNext'&gt;&rsaquo;&lt;/li&gt;; // 向右
let firstPage = &lt;li class='list-items' pagenumber=1&gt;1&lt;/li&gt;; // 第一页
let lastPage = &lt;li class='list-items' pagenumber=${totalPage}&gt;${totalPage}&lt;/li&gt;; // 最后一页
let leftOmitPage = &lt;li class='list-items' id='btnGoLeft'&gt;...&lt;/li&gt;; // 省略号
let rightOmitPage = &lt;li class='list-items' id='btnGoRight'&gt;...&lt;/li&gt;; // 省略号
let pageTips = &lt;div style='line-height:20px;margin-left:30px' id='pageTips'&gt;${pageIndex} - ${totalPage} of ${total} items&lt;/div &gt; ;
pageHtml = prevButton; // 添加向左的按钮


/* 生成页数 */
if (totalPage &lt;= 6) {
  // 总页数小于等于10页全部显示
  for (let i = 1; i &lt;= totalPage; i++) {
    pageHtml += `&lt;li class='list-items' pagenumber=${i}&gt;${i}&lt;/li&gt;`;
  }
}

//页码大于5页的情况  当前页大于5的话，并且页码是大于11页的
else if (pageIndex &lt;= 4) {
  //总页数大于10且当前页远离总页数
  for (let i = 1; i &lt;= 5; i++) {
    pageHtml += `&lt;li class='list-items' pagenumber=${i}&gt;${i}&lt;/li&gt;`;
  }
  pageHtml += rightOmitPage;
  pageHtml += lastPage;
} else if (pageIndex &gt; totalPage - 3) {
  //pageindex&gt;=9 的时候并且页数》10页的时候

  console.log('totalPage - 2:' + (totalPage - 3));
  console.log('pageindex:' + pageIndex);
  //总页数大于10且当前页接近总页数
  pageHtml += firstPage;
  pageHtml += leftOmitPage;
  for (let i = totalPage - 4; i &lt;= totalPage; i++) {
    pageHtml += `&lt;li class='list-items' pagenumber=${i}&gt;${i}&lt;/li&gt;`;
  }
} else {
  //除开上面两个情况 当前页在中间
  pageHtml += firstPage;
  pageHtml += leftOmitPage;
  for (let i = pageIndex - 1; i &lt;= pageIndex + 1; i++) {
    pageHtml += `&lt;li class='list-items' pagenumber=${i}&gt;${i}&lt;/li&gt;`;
  }
  pageHtml += rightOmitPage;
  pageHtml += lastPage;
}
pageHtml += nextButton; // 添加向右的按钮
pageHtml += pageTips;
pagination.innerHTML = pageHtml;
document
  .querySelector("li[pagenumber='" + pageIndex + "']")
  .classList.add('active');

let pagenumberBtns = document.querySelectorAll('li[pagenumber]'); // 获取所有的页码按钮

/* 点击页码按钮进行翻页 */
pagenumberBtns.forEach(function (elements) {
  elements.onclick = function () {
    pageIndex = Number(this.innerHTML); // 当前页
    document
      .querySelector("li[pagenumber='" + pageIndex + "']")
      .classList.add('active');
    pageHtml.innerHTML = '';
    initPagination();
    console.log(`go to href : ${navUrl}?pageNum=${pageIndex}`);
  };
});

/* 向左翻页 */
document.getElementById('btnPrev').addEventListener('click', function () {
  if (pageIndex &gt; 1) {
    pageIndex--;
    pageHtml.innerHTML = '';
    initPagination();
  }
});

/* 向右翻页 */
document.getElementById('btnNext').addEventListener('click', function () {
  if (pageIndex &lt; totalPage) {
    pageIndex++;
    pageHtml.innerHTML = '';
    initPagination();
  }
});

/* 向左快速翻页 */
let btnGoLeft = document.getElementById('btnGoLeft');
if (btnGoLeft) {
  btnGoLeft.addEventListener('mouseenter', function () {
    this.innerHTML = '&lt;';
  });
  btnGoLeft.addEventListener('mouseleave', function () {
    this.innerHTML = '...';
  });
  btnGoLeft.addEventListener('click', function () {
    if (pageIndex &gt; 10) {
      pageIndex -= 10;
      pageHtml.innerHTML = '';
      initPagination();
      console.log(`go to href : ${navUrl}?pageNum=${pageIndex}`);
    }
  });
}

/* 向右快速翻页 */
let btnGoRight = document.getElementById('btnGoRight');
if (btnGoRight) {
  btnGoRight.addEventListener('mouseenter', function () {
    this.innerHTML = '&gt;';
  });
  btnGoRight.addEventListener('mouseleave', function () {
    this.innerHTML = '...';
  });
  btnGoRight.addEventListener('click', function () {
    if (pageIndex &lt; totalPage - 10) {
      pageIndex += 10;
      pageHtml.innerHTML = '';
      initPagination();
      console.log(`go to href : ${navUrl}?pageNum=${pageIndex}`);
    }
  });
}



}
initPagination();
}

　　

测试生成的效果

测试时，分别需要测试当少于6页，此时全显示

 

大于6页，当前页小于6页的时候，显示后面的跳转按纽

 

大于6+6的时候，并且当前页码数大于总页数减去6的时候，显示前面的跳转按纽

其它的情况就是显示中间的页码加上两边的跳转按纽的情况