1.html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> div { width: 800px; height: 40px; border: 1px solid black; margin: 30px auto; user-select: none; } </style> <body> <div id="div1"></div> <div id="div2"></div> <script src="./navg.js"></script> <script> new Navg('#div1', { pageTag: { first: '首页1', prev: '上一页1', list: null, next: '下一页1', last: '末页1', }, pageInfo: { pageNum: 5, // 当前页数 pageSize: 10, // 每页显示条数 totalData: 1000, // 总条数 totalPage: 100, // 总页数 = 向上取整（总条数 / 每页显示条数） } },() => { console.log(11) }); new Navg('#div2', { pageTag: { first: '首页', prev: '上一页', list: null, next: '下一页', last: '末页', }, pageInfo: { pageNum: 2, // 当前页数 pageSize: 10, // 每页显示条数 totalData: 1000, // 总条数 totalPage: 100, // 总页数 = 向上取整（总条数 / 每页显示条数） } }); </script> </body> </html>
2.js文件
function Navg(ele, options, calback) { this.options = options; this.calback = calback || function () { }; // ## 默认数据 this.defaultOptions = { pageTag: { first: '首页', prev: '上一页', list: null, next: '下一页', last: '末页', }, pageInfo: { pageNum: 2, // 当前页数 pageSize: 10, // 每页显示条数 totalData: 1000, // 总条数 totalPage: 100, // 总页数 = 向上取整（总条数 / 每页显示条数） } } this.defaultOptions.pageInfo.totalPage = Math.ceil(this.defaultOptions.pageInfo.totalData / this.defaultOptions.pageInfo.pageSize) //获取页面属性 this.divObj = document.querySelector(ele) this.divObj.style.display = 'flex' this.divObj.style.justifyContent = 'center' this.divObj.style.alignItems = 'center' // 重置数据 this.setDefalutOptions(); // 调用 this.createpage(); // 初始化完成后绑定事件 this.clickEvent(); } // 设置默认数据 Navg.prototype.setDefalutOptions = function () { // 判断用户是否传值 if(this.options == undefined || (Object.keys(this.options).length == 0)){ return; } // pageTag this.defaultOptions.pageTag.first = this.options.pageTag.first; this.defaultOptions.pageTag.prev = this.options.pageTag.prev; this.defaultOptions.pageTag.list = this.options.pageTag.list; this.defaultOptions.pageTag.next = this.options.pageTag.next; this.defaultOptions.pageTag.last = this.options.pageTag.last; // pageInfo this.defaultOptions.pageInfo.pageNum = this.options.pageInfo.pageNum; this.defaultOptions.pageInfo.pageSize = this.options.pageInfo.pageSize; this.defaultOptions.pageInfo.totalData = this.options.pageInfo.totalData; this.defaultOptions.pageInfo.totalPage = this.options.pageInfo.totalPage; } // 创建分页标签 Navg.prototype.createpagenum = function () { let pageInfo = this.defaultOptions.pageInfo; if (pageInfo.pageNum < 5) { for (let i = 1; i <= 5; i++) { this.createP(i, ele = 'p') } this.createP('...', 'span') for (let i = pageInfo.totalPage - 1; i <= pageInfo.totalPage; i++) { this.createP(i, ele = 'p') } } else if (pageInfo.pageNum == 5) { for (let i = 1; i <= 7; i++) { this.createP(i, ele = 'p') } this.createP('...', 'span') for (let i = pageInfo.totalPage - 1; i <= pageInfo.totalPage; i++) { this.createP(i, ele = 'p') } } else if (pageInfo.pageNum > 5 && pageInfo.pageNum <= pageInfo.totalPage - 4) { this.createP(1) this.createP(2) this.createP('...', 'span') for (let i = parseInt(pageInfo.pageNum) - 2; i <= parseInt(pageInfo.pageNum) + 2; i++) { this.createP(i, ele = 'p') } this.createP('...', 'span') for (let i = pageInfo.totalPage - 1; i <= pageInfo.totalPage; i++) { this.createP(i, ele = 'p') } } else if (pageInfo.pageNum >= pageInfo.totalPage - 4) { this.createP(1) this.createP(2) this.createP('...', 'span') this.createP('...', 'span') for (let i = pageInfo.totalPage - 4; i <= pageInfo.totalPage; i++) { this.createP(i, ele = 'p') } } } // 创建分页标签 Navg.prototype.createpage = function () { let pageTag = this.defaultOptions.pageTag; let pageInfo = this.defaultOptions.pageInfo; let divObj = this.divObj; divObj.innerHTML = ''; for (let attr in pageTag) { let pObj = document.createElement('p') let textObj = document.createTextNode(pageTag[attr]) if (attr == 'list') { pageTag.list = pObj } else { pObj.appendChild(textObj) pObj.style.border = '1px solid black' pObj.style.margin = '0 5px' pObj.style.padding = '0 5px' pObj.style.display = 'inline-block' } divObj.appendChild(pObj) } //禁用 let pObjs = this.divObj.querySelectorAll('p') if (pageInfo.pageNum == 1) { pObjs[0].style.background = '#ccc' pObjs[1].style.background = '#ccc' } if (pageInfo.pageNum == pageInfo.totalPage) { pObjs[3].style.background = '#ccc' pObjs[4].style.background = '#ccc' } this.createpagenum() this.calback(); } // // ##创建P标签 Navg.prototype.createP = function (i, ele = 'p') { let pageInfo = this.defaultOptions.pageInfo; let pObj = document.createElement(ele) let textObj = document.createTextNode(i) pObj.appendChild(textObj) if (i == pageInfo.pageNum) { pObj.style.background = 'skyblue' } if (ele != 'span') { pObj.style.border = '1px solid black' pObj.style.margin = '0 5px' pObj.style.padding = '0 5px' pObj.style.display = 'inline-block' } this.defaultOptions.pageTag.list.appendChild(pObj) } // 绑定事件 Navg.prototype.clickEvent = function () { let pageInfo = this.defaultOptions.pageInfo; let pageTag = this.defaultOptions.pageTag; this.divObj.addEventListener('click', (e) => { e = e || window.event let target = e.target let tc = target.innerHTML if (target.nodeName == 'P' && tc == pageTag.first) { pageInfo.pageNum = 1 this.createpage() } if (target.nodeName == 'P' && tc == pageTag.prev && pageInfo.pageNum > 1) { pageInfo.pageNum -= 1 this.createpage() } if (target.nodeName == 'P' && parseInt(tc) > 0) { pageInfo.pageNum = tc this.createpage() } if (target.nodeName == 'P' && tc == pageTag.next && pageInfo.pageNum != pageInfo.totalPage) { pageInfo.pageNum = parseInt(pageInfo.pageNum) + 1 this.createpage() } if (target.nodeName == 'P' && tc == pageTag.last) { pageInfo.pageNum = pageInfo.totalPage this.createpage() } }) }
特此声明：如需转载请注明出处，如有疑问请及时提出以便于改正，如有侵权，联系删除，谢谢