分页核心：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分页</title> </head> <body> <script> (function () { /*当前页*/ var current = 4; /*总页数*/ var total = 20; /*显示的总条数[一般为单数]*/ var show = 5; /*根据显示数量算出正常情况当前页左右各有几个*/ var x = Math.floor(show / 2); var begin = current - x; begin = begin < 1 ? 1 : begin; var end = begin + show - 1; if (end > total) { end = total; begin = end - show + 1; begin = begin > 0 ? begin : 1; } var pager = document.getElementById("pager"); var ul = document.createElement('ul'); pager.appendChild(ul); for (var i = begin; i <= end; i++) { var li = document.createElement('li'); li.innerHTML = i; ul.appendChild(li); } })(); </script> </body> </html>
封装：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分页</title> <link rel="stylesheet" href="../../static/bootstrap-3.3.7/css/bootstrap.min.css"> <style> #pager { margin: 50px 0 0 500px; } </style> </head> <body> <div style="text-align: center;margin-top: 40px"> <label>输入当前页:</label><input id="current" type="text" value="1"> <label>输入总页数:</label><input id="total" type="text" value="28"> <label>输入每页显示多少条:</label><input id="show" type="text" value="5"> <button id="create">生成！</button> </div> <div id="pager"> </div> <script src="../../static/jquery/jquery-1.9.1.min.js"></script> <script> class Pager { constructor(current, total, show) { this.current = current; this.total = total; this.show = show; this.begin = -1; this.end = -1; this.region = -1; let ele = this.createUl(); this.pager = ele.pager; this.ul = ele.ul; } createUl() { var pager = $("#pager"); var ul = $('<ul></ul>'); ul.addClass('pagination'); pager.append(ul); return {'pager': pager, 'ul': ul} } createLia(type, innerHTML) { let li = $('<li></li>'); let a = $('<a></a>'); switch (type) { case 'prev': { let span = $('<span></span>'); span.html('«'); a.append(span); li.append(a); if (this.current == 1) { li.addClass('disabled'); } else { li.removeClass('disabled'); } this.ul.append(li); } break; case 'next': { let span = $('<span></span>'); span.html('»'); a.append(span); li.append(a); if (this.current < this.total) { li.removeClass('disabled'); } else { li.addClass('disabled'); } this.ul.append(li); } break; default: { a.html(innerHTML); li.append(a); this.ul.append(li); } break; } return li; } create() { this.ul.html(''); this.ul.append(this.createLia('prev')); /*根据显示数量算出正常情况当前页左右各有几个*/ this.region = Math.floor(this.show / 2); this.begin = this.current - this.region; this.begin = this.begin < 1 ? 1 : this.begin; this.end = this.begin + this.show - 1; if (this.end > this.total) { this.end = this.total; this.begin = this.end - this.show + 1; this.begin = this.begin > 0 ? this.begin : 1; } for (let i = this.begin; i <= this.end; i++) { let li = this.createLia('', i); if (this.current == i) { li.addClass('active'); } this.ul.append(li); } this.ul.append(this.createLia('next')); this.event(); } setActive(active) { this.active = active; } setCurrent(current) { this.current = current; } setShow(show) { this.show = show; } event() { let that = this; that.ul.children().each(function (key, value) { $(value).on('click', function () { this.index = key; if (this.index == 0) { that.current = that.current - 1 > 0 ? that.current - 1 : 1; } else if (this.index == that.ul.children().length - 1) { that.current = that.current + 1 > that.total ? that.total : that.current + 1; } else { that.current = parseInt($(this).children()[0].innerHTML); } that.create(); }); }); } } (function () { document.querySelector('#create').onclick = function () { var current = parseInt(document.querySelector('#current').value); var total = parseInt(document.querySelector('#total').value); var show = parseInt(document.querySelector('#show').value); var pager = new Pager(current, total, show); pager.create(); } })(); </script> </body> </html>
