jQuery分页插件（兼容IE8+）

JS部分 

;(function($) {
	function Page(ele, options) {
		var defaults = {
			page: 1,
			totalPage: 1,
			callback: function() {}
		}
		this.$element = $(ele);
		this.settings = $.extend({}, defaults, options);
		this.init();
	}
	Page.prototype = {
		init: function() {
			this.$element.empty();
			this.initHtml();
		},
		createButton: function(i) {
			if(i == this.settings.page) {
				return '<button class="active" data-page=' + i + '>' + i + '</button>';
			} else {
				return '<button data-page=' + i + '>' + i + '</button>';
			}
		},
		initHtml: function() {
			var page = this.settings.page;
			var totalPage = this.settings.totalPage;
			var pageArr = []; //分页元素集合，减少DOM重绘次数
			pageArr.push("<div class='page-number'>");
			pageArr.push(page == 1 ? "<button data-page='prev' class='button-disabled'>上一页</button>" : "<button data-page='prev'>上一页</button>");
			if(totalPage < 6) {
				for(var i = 1, len = totalPage; i <= len; i++) {
					pageArr.push(this.createButton(i));
				}
			} else {
				if(page <= 5) {
					for(var i = 1; i <= 5; i++) {
						pageArr.push(this.createButton(i));
					}
					pageArr.push("<button data-page='after' class='page-after'>...</button>");
					pageArr.push('<button data-page=' + totalPage + '>' + totalPage + '</button>');
				} else if(page > 5 && page < totalPage - 4) {
					pageArr.push('<button data-page=' + 1 + '>' + 1 + '</button>');
					pageArr.push("<button data-page='before'  class='page-before'>...</button>");
					for(var i = page - 2; i <= page + 2; i++) {
						pageArr.push(this.createButton(i));
					}
					pageArr.push("<button data-page='after'  class='page-after'>...</button>");
					pageArr.push('<button data-page=' + totalPage + '>' + totalPage + '</button>');
				} else {
					pageArr.push('<button data-page=' + 1 + '>' + 1 + '</button>');
					pageArr.push("<button data-page='before' class='page-before'>...</button>");
					for(var i = totalPage - 4; i <= totalPage; i++) {
						pageArr.push(this.createButton(i));
					}
				}
			}
			pageArr.push(page == totalPage ? "<button data-page='next' class='button-disabled'>下一页</button>" : "<button data-page='next'>下一页</button>");
			pageArr.push('</div>');
			this.$element.html(pageArr.join(""));
			this.clickButton();
		},
		clickButton: function() {
			var self = this;
			this.$element.off("click", "button");
			this.$element.on("click", "button", function() {
				var pageStatus = $(this).data("page");
				var currentPage = self.settings.page;
				switch(pageStatus) {
					case "prev":
						pageStatus = currentPage > 1 ? currentPage - 1 : 1;
						break;
					case "next":
						pageStatus = currentPage < self.settings.totalPage ? currentPage + 1 : self.settings.totalPage;
						break;
					case "before":
						pageStatus = currentPage - 5;
						break;
					case "after":
						pageStatus = currentPage + 5;
						break;
					default:
						break;
				}
				if(pageStatus == currentPage) {
					return false;
				}
				self.settings.page = pageStatus;
				self.initHtml();
				self.settings.callback(self.settings.page);
			})
			this.$element.find(".page-before").hover(function() {
				$(this).html("&laquo;");
			}, function() {
				$(this).html("...");
			})
			this.$element.find(".page-after").hover(function() {
				$(this).html("&raquo;");
			}, function() {
				$(this).html("...");
			})
		}
	}
	$.fn.Page = function(options) {
		return new Page(this, options);
	}
})(jQuery)

css部分

.page-number {
	display: inline-block;
	color: #666;
	font-size: 14px;
}

.page-number button {
	margin-left: -1px;
	padding: 0px 14px;
	line-height: 32px;
	border: 1px solid #ddd;
	box-sizing: border-box;
	text-align: center;
	transition: all .2s;
	cursor: pointer;
	outline: none;
	background: none;
	color: #666;
	vertical-align: middle;
}

.page-number button.active, .page-number button.active:hover{
	background: #2d98e6;
	color: #fff;
	border-color: #2d98e6;
}

.page-number button:hover {
	background-color: #eee;
}

.page-number button.button-disabled {
	cursor: not-allowed;
	color: #ccc;
}

.page-number .page-after,
.page-before {
	position: relative;
	padding: 0px;
	width: 40px;
}

引用

<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="Page.css" />
	</head>

	<body>
		<div id="page"></div>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script src="Page.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(function(){
				$("#page").Page({
					page:5,
					totalPage:19,
					callback:function(page){
						console.log(page)
					}
				})
			})
		</script>
	</body>

</html>