面向对象封装分页代码

首先 看下关键的api,

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 //是否显示尾页按钮

};

对于$.extend({},{})扩展对象，这里用原生的 方法实现的，代码如下：

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;
}

用法为：

var t = extendObj(o1, o2, o3);

具体js文件main.js如下：

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 = this.data = {};

		//当前页
		var pageIndex = data.pageIndex = this.pageIndex;
		//分页大小
		var pageSize = data.pageSize = this.pageSize;
		//总记录数
		data.total = total;
		//总页数
		var pages = data.pages = parseInt(Math.floor(total == 0 ? 1 : ((total % pageSize) == 0 ? total / pageSize : (total / pageSize + 1))));

		//当前页的记录范围
		data.start = total == 0 ? 0 : ((pageIndex - 1) * pageSize + 1);
		data.end = total == 0 ? 0 : (pageIndex == pages) ? total : pageSize * pageIndex;

		//是否为第一页，是否为最后一页
		data.first = pageIndex == 1;
		data.last = pageIndex == pages;
	},
	//子类需覆盖此方法，呈现分页UI
	render: function() {
		var data = this.data,
			opts = this.options;
		var html = [];

		//首页
		opts.firstDisplay && html.push([
			'<li class="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');
	}
};

　　

HTML如下：

<!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="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="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="#" class="blog-title">',
                row.title,
                '</a></h3>',
                '        <p class="pt5 mb5 lh24 g3 fix">',
                '            <img src="',
                row.avatar,
                '" alt="" class="bdc p1 w50 h50 l mr5">',
                row.content,
                '</p>',
                '        <p class="mt10 lh20"><a href="#" class="blog-author">',
                row.author,
                '</a><span class="dib ml15 mr15">发布于 ',
                row.publish_time,
                '</span><a',
                '                href="#" class="blog-stas">评论(',
                row.comment,
                ')</a><a href="#" 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>

　　page.css代码如下：

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;
     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 {
     auto;
    padding: 0 11px;
}

　　

// 用法：
// 1. 首先定义渲染页面的dom标签，比如这里的id="page_view"
// 2. 定义默认的属性，这里
// {
// defaultSize: 10,
// onChange: getData
// }
// 3. 实例化PageView，如：
// pageView = new PageView('#page_view', {
// defaultSize: 10,
// onChange: getData
// })
// 4. 定义getData函数，通过调接口并传参，注意接口的参数通过pageView.getParams()获取，所以根据需要设定接口的传参
// pageIndexName: 'page', //分页参数名称
// pageSizeName: 'page_size', //分页大小参数名称
// 可以根据需要修改
// 5. 接口调成功以后页面数据的渲染