javascript 自定义分页组件
仿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 = `<li class='list-items lbl' id='btnPrev'>‹</li>`; // 向左 let nextButton = `<li class='list-items lbr' id='btnNext'>›</li>`; // 向右 let firstPage = `<li class='list-items' pagenumber=1>1</li>`; // 第一页 let lastPage = `<li class='list-items' pagenumber=${totalPage}>${totalPage}</li>`; // 最后一页 let leftOmitPage = `<li class='list-items' id='btnGoLeft'>...</li>`; // 省略号 let rightOmitPage = `<li class='list-items' id='btnGoRight'>...</li>`; // 省略号 let pageTips = `<div style='line-height:20px;margin-left:30px' id='pageTips'>${pageIndex} - ${totalPage} of ${total} items</div > `; pageHtml = prevButton; // 添加向左的按钮 /* 生成页数 */ if (totalPage <= 6) { // 总页数小于等于10页全部显示 for (let i = 1; i <= totalPage; i++) { pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`; } } //页码大于5页的情况 当前页大于5的话,并且页码是大于11页的 else if (pageIndex <= 4) { //总页数大于10且当前页远离总页数 for (let i = 1; i <= 5; i++) { pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`; } pageHtml += rightOmitPage; pageHtml += lastPage; } else if (pageIndex > totalPage - 3) { //pageindex>=9 的时候并且页数》10页的时候 console.log('totalPage - 2:' + (totalPage - 3)); console.log('pageindex:' + pageIndex); //总页数大于10且当前页接近总页数 pageHtml += firstPage; pageHtml += leftOmitPage; for (let i = totalPage - 4; i <= totalPage; i++) { pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`; } } else { //除开上面两个情况 当前页在中间 pageHtml += firstPage; pageHtml += leftOmitPage; for (let i = pageIndex - 1; i <= pageIndex + 1; i++) { pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`; } 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 > 1) { pageIndex--; pageHtml.innerHTML = ''; initPagination(); } }); /* 向右翻页 */ document.getElementById('btnNext').addEventListener('click', function () { if (pageIndex < totalPage) { pageIndex++; pageHtml.innerHTML = ''; initPagination(); } }); /* 向左快速翻页 */ let btnGoLeft = document.getElementById('btnGoLeft'); if (btnGoLeft) { btnGoLeft.addEventListener('mouseenter', function () { this.innerHTML = '<'; }); btnGoLeft.addEventListener('mouseleave', function () { this.innerHTML = '...'; }); btnGoLeft.addEventListener('click', function () { if (pageIndex > 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 = '>'; }); btnGoRight.addEventListener('mouseleave', function () { this.innerHTML = '...'; }); btnGoRight.addEventListener('click', function () { if (pageIndex < totalPage - 10) { pageIndex += 10; pageHtml.innerHTML = ''; initPagination(); console.log(`go to href : ${navUrl}?pageNum=${pageIndex}`); } }); } } initPagination(); }
测试生成的效果
测试时,分别需要测试当少于6页,此时全显示
大于6页,当前页小于6页的时候,显示后面的跳转按纽
大于6+6的时候,并且当前页码数大于总页数减去6的时候,显示前面的跳转按纽
其它的情况就是显示中间的页码加上两边的跳转按纽的情况
半斤八两开始写BLOG了