This is a paging plug -in with native JS. If you are interested, you can look at the thinking of the function packaging and learn from the thinking
Effect chart:
html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>paging plug -in</title> </head> <style> #page{ padding: 50px;} </style> <body> <div id='page'></div> <script type="text/javascript" src="page.js"></script> <script> /** * Pure JS paging plug -in, code disadvantage: js operations are too much redundant, too cumbersome */ pageUtil.initPage('page', { totalCount: 500,// Total pages are generally obtained from the callback function. If there is no data, the default is 1 page curPage: 1,// The default selection page during initialization, the default first page. If the filling range overflows or a non -digital or digital string, the default first page showCount: 6,// The quantity displayed in the padding bar pageSizeList: [5, 10, 15, 20, 25, 30],// Customized pagination, default [5,10,15,20,50] defaultPageSize: 10,// The number of paginations selected by default, the first one by default. If it is not matched to an array or the default array, it is also the first isJump: true,// Whether the jump function contains the jump function, the default FALSE isPageNum: true,// Whether to show paging drop -down selection, default FALSE isPN: true,// Whether to display the previous page and the next side, default TRUE isFL: true,// Whether the homepage and last page display, default TRUE jump: function (curPage, pageSize) { // Jumping function back, pass back 2 parameters, the current page and the size of each page. If there is no pagination pull -down, the second parameter is always 0. The this here is specified as an empty object. If you need to use this in the callback, please use the bind method by yourself console.log(curPage, pageSize); } }); </script> </body> </html>
page.js
/** * All plug -in */ /** * Event that is compatible with IE and other tourists binds plug -in */ if(typeof jQuery ==='undefined'){ console.warn('[Warning] Lack of plug -in jQuery, some functions are affected! Please import the jQuery plug -in! '); } if(typeof layui ==='undefined' && typeof layer ==='undefined'){ console.warn('[Warning] Lack of plug -in Layui, so some functions will be affected. It is recommended to import Layui.all.js and CSS. ') } (function(window,undefined){ /* * Compatible IE8-Tourist event adding objects */ var EventUtil = {}; EventUtil.addEvent = function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.attachtEvent){ var scope = function(){ handler.call(element); }; element.attachtEvent("on"+type,scope); this[handler.name] = scope; }else{ element["on"+type] = handler; } }; EventUtil.removeEvent = function(element,type,handler){ if(element.removeEventListener){ element.removeEventListener(type,handler,false); }else if(element.detachEvent){ if(this[handler.name]){ element.detachEvent("on"+type,this[handler.name]); delete this[handler.name]; }else{ element["on"+type] = null; } } }; EventUtil.stopPropagation = function(){ if(event.stopPropagation){ event.stopPropagation(); }else if(typeof event.cancelBubble == "boolean"){ event.cancelBubble = true; }else{ throw new Error("element can not stopPropagation"); } }; // Not as well as Fire Fox Tour. The global Event of Firefox Tour does not exist, and must be passed in in the callback function EventUtil.preventDefault = function(){ var hasReturnValue = function(){ for(var key in event){ if(key == "returnValue") return true; } return false; }; if(event.preventDeafult){ event.preventDeafult(); }else if(hasReturnValue()){ event.returnValue = false; }else{ throw new Error("element can not preventDefault"); } }; EventUtil.getTarget = function(){ return event.target ? event.target : event.srcElement; }; // Get the user press Ctrl, Shift, Meta, Alt when clicking when the mouse is clicked at the same time EventUtil.getClickKeys = function(){ var keys = new Array(); if(event){ if(event.shiftKey){ keys.push("shift"); } if(event.ctrlKey){ keys.push("ctrl"); } if(event.metaKey){ keys.push("meta"); } if(event.altKey){ keys.push("alt"); } } return keys; }; // Get related elements. Only in Mouseout and Mouseover EventUtil.getRelatedTarget = function(){ if(event.relatedTarget){ return event.relatedTarget; }else if(event.fromElement){ return event.fromElement; }else if(event.toElement){ return event.toElement; }else{ return null; } }; // Get the key position when you get the mouse clicks, 0 indicates that click the mouse button (left button), 1 represents the intermediate button, 2 indicates the mouse code button EventUtil.getMouseButton = function(){ if(document.implementation.hasFeature("MouseEvents","2.0")){ if(typeof event.button == "number") return event.button; else return -1; }else{ var type = event.button || -1; switch(type){ case 0: case 1: case 3: case 5: case 7: return 0; case 2: case 6: return 2; case 4: return 1; default: return -1; } } }; window ? window.eventUtil = EventUtil : eventUtil = EventUtil; })(window); /** * Pure JS paging plug -in */ (function(window,undefined){ var params = {}; // All the sub -nodes under a node are cleared, deleted from behind by default. Because some tourists may sort and jump default function removeChildNodes(node){ if(!(node instanceof Element)){ throw new Error('Can't delete the sub -node function of non -element nodes! '); } var i,length,childs = node.childNodes; for(length = childs.length,i=length-1;i>=0;i--){ node.removeChild(childs[i]); } } function initPage(id,option){ option = option || {}; params.option = option; var page = document.getElementById(id); page.style.fontSize='14px'; page.style.color='#333'; page.style.display='inline-block'; page.style.margin='0 auto'; //removeChildNodes(page); var totalCount = parseInt(option.totalCount) >=0 ? parseInt(option.totalCount) : 0;// Total record number var pageSizeList = option.pageSizeList || [5,10,15,20,50], defaultPageSize = !!(option.defaultPageSize && pageSizeList.indexOf(option.defaultPageSize) >=0)? option.defaultPageSize : pageSizeList[0];// Default paging number var totalPage = Math.ceil(totalCount / defaultPageSize); // Total Pages totalPage = totalPage <= 0 ? 1 : totalPage; curPage = option.curPage && option.curPage >=1 ? (option.curPage && option.curPage <= totalPage ? option.curPage : totalPage) : 1,// Current page showCount = option.showCount && option.showCount >=1 ? option.showCount : 5;// Display per page var ul = createPageList(curPage,totalPage,showCount); // Add the number of pages per page, the default is 5-25 selection, you can customize the number of pages var isPageNum = option.isPageNum || false; if(isPageNum){ var select = document.createElement('select') , sel , tempOption ,pageDiv,span1 ,span2; select.style.height='30px'; select.style.border='1px solid #ddd'; select.style.color='#333'; select.style.outline='none'; pageDiv = document.createElement('div'); pageDiv.id = 'pageDiv'; pageDiv.style.display='inline-block'; span1 = document.createElement('span'); span2 = document.createElement('span'); span1.innerHTML = 'Show per page'; span1.style.marginRight='5px'; span1.style.verticalAlign='middle'; span2.innerHTML = 'strip'; span2.style.verticalAlign='middle'; span2.style.marginLeft='5px'; span2.style.marginRight='15px'; for(sel in pageSizeList){ tempOption = document.createElement('option'); tempOption.setAttribute('value',pageSizeList[sel]); tempOption.innerHTML = '' + pageSizeList[sel]; if(pageSizeList[sel] == defaultPageSize){ tempOption.setAttribute('selected','selected'); } select.appendChild(tempOption); } pageDiv.appendChild(span1); pageDiv.appendChild(select); pageDiv.appendChild(span2); page.appendChild(pageDiv);// Add page number selection// Change the number of drop -down incidents eventUtil.addEvent(select,'change',function(e){ var num = +this.options[this.selectedIndex].innerHTML; totalPage = Math.ceil(totalCount / num); var newUl = createPageList(1,totalPage,showCount), label = document.getElementById('show_label'); reflash(page,newUl,option,1); if(label){ label.innerHTML = 'Together'+ totalPage + 'page'; } }); } page.appendChild(ul);// Add each page list// Jump related code var isJump = option.isJump || false; if(isJump){ var input = document.createElement('input'); input.style.height='28px'; input.style.border='1px solid #ddd'; input.style.padding='0px'; input.style.width='37px'; input.style.textAlign='center'; input.style.marginRight='5px'; input.style.outlineColor='#388E3C'; input.style.verticalAlign='middle'; input.setAttribute('type','text'); input.setAttribute('value',curPage); var button = document.createElement('button'), label = document.createElement('label'), jumpDiv = document.createElement('div'); button.style.border='1px solid #ddd'; button.style.verticalAlign='middle'; button.style.height='30px'; button.style.lineHeight='30px'; button.style.backgroundColor='#fafafa'; button.style.color='#333'; button.style.outline='none'; button.style.cursor='pointer'; jumpDiv.style.display='inline-block'; jumpDiv.style.marginLeft='5px'; jumpDiv.id='jumpDiv'; button.id = 'jump'; button.innerHTML = 'jump to'; label.style.marginRight='15px'; label.style.verticalAlign='middle'; label.id = 'show_label'; label.innerHTML = 'Together'+totalPage+'page'; jumpDiv.appendChild(label); jumpDiv.appendChild(input); jumpDiv.appendChild(button); page.appendChild(jumpDiv); // jump clicks eventUtil.addEvent(button,'click',function(e){ var curPage = parseInt(input.value); if(curPage && curPage >=1 && curPage <= totalPage){ var newUl = createPageList(curPage,totalPage,showCount); reflash(page,newUl,option,curPage,true); } }); hover(page); button.onmouseover=function(){ button.style.color='#388E3C'; }; button.onmouseout=function(){ button.style.color='#333'; }; } /** * Page related clicks */ eventUtil.addEvent(page,'click',function(e){ var target = e.target, nodeName = target.nodeName.toLocaleLowerCase(); if(nodeName != 'li' && nodeName !='a') return; target = nodeName == 'li' ? target : target.parentNode; if(!hasClass(target,'no-active') && !hasClass(target,'active')){ switch(true){ case hasClass(target,'first'): curPage = 1; break; case hasClass(target,'last'): curPage = totalPage; break; case hasClass(target,'next'): curPage = curPage == totalPage ? curPage : curPage + 1; break; case hasClass(target,'prev'): curPage = curPage == 1 ? 1 : curPage - 1; break; default: curPage = parseInt(target.firstElementChild.innerHTML); } var newUl = createPageList(curPage,totalPage,showCount); reflash(page,newUl,option,curPage); } }); } // hold event function hover(page){ //cm add page.onmouseover=function(e){ if(e.target.nodeName.toLocaleLowerCase()=='a' &&!hasClass(e.target.parentNode,'active')&&!hasClass(e.target.parentNode,'no-active')){ e.target.style.color='#388e3c'; e.target.style.backgroundColor='#eee'; } }; //cm add page.onmouseout=function(e){ if(e.target.nodeName.toLocaleLowerCase()=='a' &&!hasClass(e.target.parentNode,'active')&&!hasClass(e.target.parentNode,'no-active')){ e.target.style.color='#333'; e.target.style.backgroundColor='#fafafa'; } }; } // Remove the old pagelist, add a new Pagelist and call the callback function function reflash(page,newUl,option,curPage,isClick){ page.removeChild(page.firstElementChild.id != 'pageDiv' ? page.firstElementChild : page.firstElementChild.nextElementSibling); if(!page.firstElementChild || page.firstElementChild.id == 'jumpDiv'){ page.insertBefore(newUl,page.firstElementChild); }else{ page.insertBefore(newUl,page.firstElementChild.nextElementSibling); } if(option.jump){ var select = page.getElementsByTagName('select'), pageSize = 0,selectedIndex; if(select && select[0]){ select = select[0]; selectedIndex = select.selectedIndex; pageSize = +select.options[selectedIndex].innerHTML; } option.jump.call(Object.create(null),curPage,pageSize); } var isJump = option.isJump || false, input; if(isJump && !isClick){ // If the jump is turned on, the value in the input box changes. If you click and jump, you don't need to change it again input = page.getElementsByTagName('input')[0]; input.value = curPage; } } /** * Determine whether the node contains a certain class * @param {Object} node * @param {Object} className */ function hasClass(node,className){ if( !(node instanceof Element)){ throw new Error('Can't judge the non -Element node! '); } var classList = node.classList, length = classList.length,i; for(i=0;i<length;i++){ if(classList[i] == className){ return true; } } return false; } function changeColor(node){ node.style.backgroundColor='#388E3C'; } function createPageList(curPage,totalPage,showCount){ var option = params.option || {}; var isFL = option.isFL === true ? true : false, isPN = option.isPN === true ? true : false; var ul = document.createElement('ul'), first = document.createElement('li'), last = document.createElement('li'), i,tempLi,yz = Math.ceil(showCount / 2); ul.style.margin='0'; ul.style.display='inline-block'; ul.style.verticalAlign='middle'; ul.style.padding='0px'; ul.style.lineHeight='18px'; var next = document.createElement('li'), prev = document.createElement('li'); next.className = 'next'; prev.className = 'prev'; next.innerHTML = 'Next page'; prev.innerHTML = 'Previous'; first.className = 'first'; last.className = 'last'; first.innerHTML = 'Home; last.innerHTML = 'last page'; isFL ? ul.appendChild(first): ''; isPN ? ul.appendChild(prev): ''; for(i=0;i<Math.min(totalPage,showCount);i++){ tempLi = document.createElement('li'); if(totalPage <= showCount){ tempLi.innerHTML = (i+1) + ''; if((i+1) == curPage){ tempLi.className = 'active'; } }else{ if(curPage <= yz || curPage > (totalPage - yz)){ // The previous and the last few if(curPage <= yz){ tempLi.innerHTML = (i+1) + ''; if(i+1 == curPage){ tempLi.className = 'active'; } }else{ tempLi.innerHTML = (totalPage - showCount + i + 1); if((totalPage - showCount + i + 1) == curPage){ tempLi.className = 'active'; } } }else{ tempLi.innerHTML = (curPage - yz + i + 1); if((i + 1) == yz){ tempLi.className = 'active'; } } } ul.appendChild(tempLi); } isPN ? ul.appendChild(next) : ''; isFL ? ul.appendChild(last) : ''; var lis = ul.getElementsByTagName('li'), tempLi; for(i=0;i<lis.length;i++){ tempLi = lis[i]; tempLi.innerHTML = createLink(tempLi.innerHTML); tempLi.style.listStyle = 'none'; tempLi.style.display='inline'; tempLi.childNodes[0].style.cssFloat = 'left'; tempLi.childNodes[0].style.cursor = 'pointer'; tempLi.childNodes[0].style.padding='5px 10px'; tempLi.childNodes[0].style.backgroundColor='#fafafa'; tempLi.firstElementChild.style.color = '#333'; if(tempLi.className == 'active'){ tempLi.childNodes[0].style.backgroundColor = '#388E3C'; tempLi.childNodes[0].style.color='#fff'; } tempLi.childNodes[0].style.border = '1px solid #ddd'; tempLi.childNodes[0].style.marginLeft = '-1px'; tempLi.firstElementChild.style.textDecoration = 'none'; } if(curPage == 1 || curPage == totalPage){ if(curPage == 1){ disable([first,prev]); } if(curPage == totalPage){ disable([last,next]); } } var clear1=document.createElement('div'); clear1.style.clear='left'; ul.appendChild(clear1); return ul; } function createLink(str){ return "<a href='#'>" + str + "</a>"; } function disable(arr){ arr = Array.isArray(arr) ? arr : [arr]; var i; for(i in arr){ arr[i].classList.add('no-active'); if(arr[i].firstElementChild){ // Sometimes if first is fALSE, it will not be added to UL, so A connection arr[i].firstElementChild.style.color = 'gainsboro'; arr[i].firstElementChild.style.cursor = 'not-allowed'; } arr[i].style.cursor = 'not-allowed' } } // Add to the global environment pageUtil = { initPage:initPage } })(window);