var DEFAULTS = {	defaultIndex: 1, //默认页	defaultSize: 10, //默认分页大小	pageIndexName: ‘page‘, //分页参数名称	pageSizeName: ‘page_size‘, //分页大小参数名称	onChange: ‘‘, //分页改变或分页大小改变时的回调	onInit: ‘‘, //初始化完毕的回调	allowActiveClick: true, //控制当前页是否允许重复点击刷新	middlePageItems: 4, //中间连续部分显示的分页项	frontPageItems: 3, //分页起始部分最多显示3个分页项，否则就会出现省略分页项	backPageItems: 2, //分页结束部分最多显示2个分页项，否则就会出现省略分页项	ellipseText: ‘...‘, //中间省略部分的文本	prevText: ‘上一页‘,	nextText: ‘下一页‘,	prevDisplay: true, //是否显示上一页按钮	nextDisplay: true, //是否显示下一页按钮	firstText: ‘首页‘,	lastText: ‘尾页‘,	firstDisplay: false, //是否显示首页按钮	lastDisplay: false //是否显示尾页按钮};function cloneObj(oldObj) { //复制对象方法	if (typeof(oldObj) != ‘object‘) return oldObj;	if (oldObj == null) return oldObj;	var newObj = new Object();	for (var i in oldObj)		newObj[i] = cloneObj(oldObj[i]);	return newObj;};function extendObj() { //扩展对象	var args = arguments;	if (args.length < 2) return;	var temp = cloneObj(args[0]); //调用复制对象方法	for (var n = 1; n < args.length; n++) {		for (var i in args[n]) {			temp[i] = args[n][i];		}	}	return temp;}/** * 获取连续部分的起止索引 */function getInterval(data, opts) {	var ne_half = Math.ceil(opts.middlePageItems / 2);	var np = data.pages;	var upper_limit = np - opts.middlePageItems;	var start = data.pageIndex > ne_half ? Math.max(Math.min(data.pageIndex - ne_half, upper_limit), 0) : 0;	var end = data.pageIndex > ne_half ? Math.min(data.pageIndex + ne_half, np) : Math.min(opts.middlePageItems, np);	return [start, end];}function PageView(element, pageInfo) {	this.options = extendObj(DEFAULTS, pageInfo);	this.element = $(element);	this.pageIndex = this.options.defaultIndex;	this.pageSize = this.options.defaultSize;}PageView.prototype = {	init: function() {		var opts = this.options;		var $element = this.element;		if (typeof(opts.onChange) === ‘function‘) {			$element.on(‘pageViewChange‘, $.proxy(opts.onChange, this))		}		if (typeof(opts.onInit) === ‘function‘) {			$element.on(‘pageViewInit‘, $.proxy(opts.onInit, this));		}		//子类可在这里面处理分页点击及分页大小改变的事件		this.bindEvents();		$element.trigger(‘pageViewInit‘);	},	//获取分页参数	getParams: function() {		var p = {};		p[this.options.pageIndexName] = this.pageIndex;		p[this.options.pageSizeName] = this.pageSize;		return p;	},	//传递一个记录总数来刷新分页状态	refresh: function(total) {		this._setup(total);		this.render();	},	_setup: function(total) {		//分页信息对象，可用于渲染UI		var data = http://www.mamicode.com/this.data = {};"first ‘,			data.first ? ‘disabled‘ : ‘‘,			‘"><a href="javascript:;">‘,			opts.firstText,			‘</a></li>‘		].join(‘‘));		//上一页		opts.prevDisplay && html.push([			‘<li class="prev ‘,			data.first ? ‘disabled‘ : ‘‘,			‘"><a href="javascript:;">‘,			opts.prevText,			‘</a></li>‘		].join(‘‘));		function appendItem(page) {			page = page + 1;			html.push([				‘<li class="page ‘,				page == data.pageIndex ? ‘active‘ : ‘‘,				‘"><a href="javascript:;">‘,				page,				‘</a></li>‘,			].join(‘‘));		}		function appendEllItem() {			html.push([				‘<li class="page page_ell‘,				‘"><span>‘,				opts.ellipseText,				‘</span></li>‘,			].join(‘‘));		}		var interval = getInterval(data, opts);		// 产生起始点		if (interval[0] > 0 && opts.frontPageItems > 0) {			var end = Math.min(opts.frontPageItems, interval[0]);			for (var i = 0; i < end; i++) {				appendItem(i);			}			if (opts.frontPageItems < interval[0] && opts.ellipseText) {				appendEllItem();			}		}		// 产生内部的些链接		for (var i = interval[0]; i < interval[1]; i++) {			appendItem(i);		}		// 产生结束点		if (interval[1] < data.pages && opts.backPageItems > 0) {			if (data.pages - opts.backPageItems > interval[1] && opts.ellipseText) {				appendEllItem();			}			var begin = Math.max(data.pages - opts.backPageItems, interval[1]);			for (var i = begin; i < data.pages; i++) {				appendItem(i);			}		}		//下一页		opts.nextDisplay && html.push([			‘<li class="next ‘,			data.last ? ‘disabled‘ : ‘‘,			‘"><a href="javascript:;">‘,			opts.nextText,			‘</a></li>‘		].join(‘‘));		//尾页		opts.lastDisplay && html.push([			‘<li class="last ‘,			data.last ? ‘disabled‘ : ‘‘,			‘"><a href="javascript:;">‘,			opts.lastText,			‘</a></li>‘		].join(‘‘));		this.element.html(html.join(‘‘));	},	bindEvents: function() {		var that = this,			opts = this.options,			$element = this.element;		function pageIndexChange(pageIndex) {			if (that.disabled) return;			that.pageIndex = pageIndex;			$element.trigger(‘pageViewChange‘);		}		//首页		opts.firstDisplay && $element.on(‘click‘, ‘.first:not(.disabled) a‘, function(e) {			e.preventDefault();			pageIndexChange(1);		});		//末页		opts.lastDisplay && $element.on(‘click‘, ‘.last:not(.disabled) a‘, function(e) {			e.preventDefault();			pageIndexChange(that.data.pages);		});		//上一页		opts.prevDisplay && $element.on(‘click‘, ‘.prev:not(.disabled) a‘, function(e) {			e.preventDefault();			pageIndexChange(that.pageIndex - 1);		});		//下一页		opts.nextDisplay && $element.on(‘click‘, ‘.next:not(.disabled) a‘, function(e) {			e.preventDefault();			pageIndexChange(that.pageIndex + 1);		});		//具体页		$element.on(‘click‘, ‘.page a‘, function(e) {			e.preventDefault();			var $this = $(this),				callback = true;			if ($this.parent().hasClass(‘active‘) && !opts.allowActiveClick) {				callback = false;			}			callback && pageIndexChange(parseInt($.trim($this.text())));		});	},	//启用	enable: function() {		this.disabled = false;		this.element.removeClass(‘disabled‘);	},	//禁用	disable: function() {		this.disabled = true;		this.element.addClass(‘disabled‘);	}};

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Examples</title><meta name="description" content="test"><meta name="keywords" content="test"><link href="http://www.mamicode.com/css/page.css" rel="stylesheet" >    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>   <script type="text/javascript" src="http://www.mamicode.com/js/main.js"> </script>   <script type="text/javascript">   $(function() { var api = {        list: ‘http://liuyunzhuge.github.io/blog/form/dist/html/api/pageView.json‘,    };var getBlogItemHtml = function (row) {            return [‘<li class="blog-entry">‘,                ‘    <div class="cell pl15">‘,                ‘        <h3 class="f14 mb5 lh18"><a href="http://www.mamicode.com/#" class="blog-title">‘,                row.title,                ‘</a></h3>‘,                ‘        <p class="pt5 mb5 lh24 g3 fix">‘,                ‘            <img src="http://www.mamicode.com/‘,"  class="bdc p1 w50 h50 l mr5">‘,                row.content,                ‘</p>‘,                ‘        <p class="mt10 lh20"><a href="http://www.mamicode.com/#" class="blog-author">‘,                row.author,                ‘</a><span class="dib ml15 mr15">发布于 ‘,                row.publish_time,                ‘</span><a‘,                ‘                href="http://www.mamicode.com/#" class="blog-stas">评论(‘,                row.comment,                ‘)</a><a href="http://www.mamicode.com/#" class="blog-stas">阅读(‘,                row.read,                ‘)</a></p>‘,                ‘    </div>‘,                ‘</li>‘].join(‘‘);        },         getData = function () {            pageView.disable();            $.ajax({              url: api.list,              type:‘GET‘,              data:pageView.getParams()            }).done(function (res) {                    if (res.code == 200) {                      var html = [];                        pageView.refresh(res.data.total);                        res.data.rows.forEach(function (row, i) {                            row.title = row.title + (pageView.data.start + i);                            html.push(getBlogItemHtml(row, i));                        });                        $blog_list.html(html.join(‘‘));                    }                }).always(function(){                    pageView.enable();                });                        },        $blog_list = $(‘#blog_list‘),        pageView = new PageView(‘#page_view‘, {                    defaultSize: 10,                    firstDisplay:true,                    lastDisplay:true,                    onChange: getData                });        pageView.init();        getData();   	    });   </script><body> <div id="blog_list"></div><ul id="page_view" class="page_view">  <!-- <li class="page "><a href="javascript:;">1</a></li> --></ul>   </body></html>

a {    text-decoration: none;}.page_wrapper {    padding-top: 20px;    padding-bottom: 20px;}.page_wrapper .page_view {    text-align: center;}.page_view {    padding: 0;    margin: 0;}.page_view:before,.page_view:after {    content: " ";    display: table;}.page_view:after {    clear: both;}.page_view > li {    display: inline-block;}.page_view > li + li {    margin-left: 10px;}.page_view > li > a,.page_view > li > span {    display: block;    line-height: 28px;    height: 28px;    text-align: center;    color: #646464;    border-radius: 14px;    background-color: transparent;    border: 1px solid #d1ced1;    font-size: 12px;    width: 28px;    font-weight: 400;}.page_view > li > a:hover,.page_view > li > a:focus {    text-decoration: none;}.page_view:not(.disabled) > li:not(.disabled) > a:hover,.page_view > li.active > a {    color: #fff;    background-color: #06af79;    border-color: #06af79;}.page_view > li.disabled,.disabled.page_view > li {    opacity: .7;}.page_view > li.disabled > a:hover,.disabled.page_view > li > a:hover {    cursor: not-allowed;}.page_view > li.page_ell {    vertical-align: top;}.page_view > li.page_ell > span {    line-height: 18px;}.page_view > li.prev > a,.page_view > li.next > a,.page_view > li.first > a,.page_view > li.last > a {    width: auto;    padding: 0 11px;}