直接看效果点这里
HTML
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分页插件</title> <link rel="stylesheet" href="page.min.css"/> </head> <body> <script src="page.min.js"></script> <script> /** * Created by jununx@gmail.com on 14-9-23. * * 分页 * @param box{[id]} 该分页放在什么容器里，默认随机创建一个id添加到body里 * @param isHeadAndTail{bool} 是否显示首页/尾页，默认true * @param maxPage{number} 最多显示页码，默认10 * @param currPage{number} 当前页，默认1 * @param currPagePos{number} 当前页位置，默认4，必须小于页码数 * @param pageNum{number} 每页显示多少条数据，默认10 * @param countNum{number} 一共有多少条数据，默认0 * * @event onChange(n) 每次切换页码时执行，n表示切换到某页 * */ var page = new Page({ 'countNum': 0, 'onChange': function(n){ alert('你选择了第'+n+'页。'); } }); var page2 = new Page({ 'countNum': 50, 'onChange': function(n){ alert('你选择了第'+n+'页。'); } }); var page3 = new Page({ 'countNum': 99, 'onChange': function(n){ alert('你选择了第'+n+'页。'); } }); var page4 = new Page({ 'countNum': 1001, 'onChange': function(n){ alert('你选择了第'+n+'页。'); } }); page4.render(101); </script> </body> </html>
CSS
@charset "utf-8"; html, body { margin: 0; padding: 0; } a,a:link,a:visited,a:hover,a:active,a:focus { text-decoration: none; } .m_page { text-align: center; font-size: 12px; color: #666; } .page_main a,.page_select,.page_btn { border-radius: 3px; border: 1px #ccc solid; } .page_main a { display:inline-block; vertical-align:top; padding: 5px 10px; margin: 0 3px; color: #333; background-color: #fff; } .page_main a:hover { border-color: #ccc; } .page_main .page_active,.page_main a:hover,.page_btn:hover { color:#fff; border-color:#125dae; background-color:#2173cd; text-decoration: none; } .page_main .page_active { cursor: default; } .page_main .page_prev { padding-left: 20px; } .page_main .page_next { padding-right: 20px; } .page_prev,.page_next { position: relative; } .page_prev i,.page_next i { position: absolute; top: 8px; border-style: solid; border-width: 4px; font-size: 0; height: 0; line-height: 0; width: 0; } .page_prev i { left: 5px; border-color: #fff #666 #fff #fff;} .page_next i { right: 5px; border-color: #fff #fff #fff #666;} .page_prev:hover i { border-color: #2173cd #fff #2173cd #2173cd;} .page_next:hover i { border-color: #2173cd #2173cd #2173cd #fff;} .page_info { padding: 5px 0; color: #999; line-height: 24px; } .page_select { width: 24px; height: 22px; line-height: 22px; padding: 0 5px; color: #666; margin: 0 3px; text-align: center; } .page_btn { width: 50px; height: 24px; background: none; cursor: pointer; }
/** * Created by jununx@gmail.com on 14-9-23. * * 分页 * @param box{[id]} 该分页放在什么容器里，默认随机创建一个id添加到body里 * @param isHeadAndTail{bool} 是否显示首页/尾页，默认true * @param maxPage{number} 最多显示页码，默认10 * @param currPage{number} 当前页，默认1 * @param currPagePos{number} 当前页位置，默认4，必须小于页码数 * @param pageNum{number} 每页显示多少条数据，默认10 * @param countNum{number} 一共有多少条数据，默认0 * * @event onChange(n) 每次切换页码时执行，n表示切换到某页 * */ var PageTools = { create: function() { return function() { this.init.apply(this, arguments); } }, extend: function (d, s){ for(var i in s){ d[i] = s[i]; } return d; }, bindEvent: function(o, ev, fn){ window.addEventListener ? o.addEventListener(ev, fn, false) : o.attachEvent('on'+ev, fn); }, getByClass: function (classname, parent, nodename) { var parent = parent || document, nodename = nodename || "*"; if(parent.getElementsByClassName){ return parent.getElementsByClassName(classname); }else{ var l = parent.getElementsByTagName(nodename); return function () { var res = []; for (var i = 0, j = l.length; i < j; i++) { if (l[i].className){ var name = " " + l[i].className + " "; if (name.indexOf(" " + classname + " ") != -1) { res.push(l[i]); } } } return res; } (); } }, getById: function(id){ return document.getElementById(id); } }; var Page = PageTools.create(); Page.prototype = { init: function(opts){ this.opts = PageTools.extend({ 'isHeadAndTail': true, 'box': 'page'+Math.floor(Math.random() * new Date().getTime()), 'currPage': 1, 'currPagePos': 4, 'maxPage': 10, 'pageNum': 10, 'countNum': 0, 'countPage': 0, 'onChange': function(n){} }, opts || {}); this.bState = true; this.render(this.opts.currPage || 1); }, render: function(currPage){ //没有数据的直接返回 if(this.opts.countNum < 1){ return false; } var countPage = this.opts.countPage = Math.ceil(this.opts.countNum/this.opts.pageNum), maxPage = this.opts.maxPage - 1, startPageNum = 0, endPageNum = 0; if(currPage < 1 || typeof currPage === 'undefined'){ currPage = 1; }else if(currPage > countPage){ currPage = countPage; } var htmltpl = '<div class="m_page"><div class="page_main">', This = this; if(this.opts.isHeadAndTail && currPage != 1){ htmltpl += '<a class="page_first" href="javascript:;">首页</a>'; } htmltpl += '<a class="page_prev" href="javascript:;"><i></i>上一页</a>'; if(currPage <= this.opts.currPagePos){ startPageNum = 1; }else if(currPage > (countPage - maxPage)){ startPageNum = countPage - maxPage < 1 ? 1 : countPage - maxPage; }else{ startPageNum = currPage - this.opts.currPagePos; } if(startPageNum + maxPage >= countPage){ endPageNum = countPage; }else{ endPageNum = startPageNum + maxPage; } for(var i = startPageNum; i <= endPageNum; i++){ if(i === currPage){ htmltpl += '<a class="page_active" href="javascript:;">'+i+'</a>'; }else{ htmltpl += '<a class="page_num" href="javascript:;">'+i+'</a>'; } } htmltpl += '<a href="javascript:;" class="page_next">下一页<i></i></a>'; if(this.opts.isHeadAndTail && currPage != countPage){ htmltpl += '<a href="javascript:;" class="page_last">尾页</a>'; } htmltpl += '</div><div class="page_info">共<span class="page_count_record">'+this.opts.countNum+'</span>条记录，共<span class="page_count_pagination">'+countPage+'</span>页，当前显示第<span class="page_range">'+((currPage-1)*this.opts.pageNum + 1) +'-'+(this.opts.countNum < this.opts.pageNum ? this.opts.countNum : currPage*this.opts.pageNum > this.opts.countNum ? this.opts.countNum : currPage*this.opts.pageNum)+'</span>条，到<input type="text" class="page_select" value="">页，<button class="page_btn">确定</button></div></div>'; this.opts.currPage = currPage; var oBox = document.getElementById(this.opts.box); if(oBox){ oBox.innerHTML = htmltpl; }else{ oBox = document.createElement('div'); oBox.id = this.opts.box; oBox.innerHTML = htmltpl; document.getElementsByTagName('body')[0].appendChild(oBox); } if(this.bState){ // TODO:不添加开关会执行多次 this.bState = false; PageTools.bindEvent(oBox, 'click', function(e){ var ev = e || window.event; var target = ev.target || ev.srcElement; This.events(target); }); } }, events: function(target){ switch (target.className){ case 'page_num': this.goPage(parseInt(target.innerHTML, 10)); break; case 'page_first': this.firstPage(); break; case 'page_prev': this.prevPage(); break; case 'page_next': this.nextPage(); break; case 'page_last': this.lastPage(); break; case 'page_btn': var n = parseInt(target.previousElementSibling ? target.previousElementSibling.value : PageTools.getByClass('page_select', PageTools.getById(this.opts.box))[0].value, 10); if(isNaN(n) || n == 0){ n = 1; }else if(n > this.opts.countPage){ n = this.opts.countPage; } this.goPage(n); break; } }, firstPage: function(){ this.render(1); this.opts.onChange(1); }, prevPage: function(){ var n = this.opts.currPage > 1 ? this.opts.currPage - 1 : 1; this.render(n); this.opts.onChange(n); }, lastPage: function(){ var n = this.opts.countPage; this.render(n); this.opts.onChange(n); }, nextPage: function(){ var n = this.opts.currPage < this.opts.countPage ? this.opts.currPage + 1 : this.opts.countPage; this.render(n); this.opts.onChange(n); }, goPage: function(n){ this.render(n); this.opts.onChange(n); } };