jQuery分页插件Pagination js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery分页插件Pagination js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery分页插件Pagination</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link href="dist/pagination.css" rel="stylesheet" type="text/css">
<style type="text/css">
	ul, li{
		list-style: none;
	}
	#wrapper{
		width: 900px;
		margin: 20px auto;
	}
	.data-container{
		margin-top: 5px;
	}
	.data-container ul{
		padding: 0;
		margin: 0;
	}
	.data-container li{
		margin-bottom: 5px;
		padding: 5px 10px;
		background: #66677c;
		color: #fff;
	}
</style>

</head>
<body>
<div id="wrapper">
	<section>
		<div class="data-container"></div>
		<div id="pagination-demo1"></div>
	</section>
</div>

<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="dist/pagination.js"></script>
<script>
	$(function(){

		function createDemo(name){
			var container = $('#pagination-' + name);
			var sources = function(){
				var result = [];

				for(var i = 1; i < 196; i++){
					result.push(i);
				}

				return result;
			}();

			var options = {
				dataSource: sources,
				className: 'paginationjs-theme-blue',
				callback: function(response, pagination){
					window.console && console.log(response, pagination);

					var dataHtml = '<ul>';

					$.each(response, function(index, item){
						dataHtml += '<li>'+ item +'</li>';
					});

					dataHtml += '</ul>';

					container.prev().html(dataHtml);
				}
			};

			//$.pagination(container, options);

			container.addHook('beforeInit', function(){
				window.console && console.log('beforeInit...');
			});
			container.pagination(options);

			container.addHook('beforePageOnClick', function(){
				window.console && console.log('beforePageOnClick...');
				//return false
			});

			return container;
		}

		createDemo('demo1');

	});
</script>
</body>
</html>

JS代码(pagination.js):

/* * pagination.js 2.0.6 * A jQuery plugin to provide simple yet fully customisable pagination. * https://github.com/superRaytin/paginationjs * * Homepage:http://paginationjs.com * * Copyright 2014-2100,superRaytin * Released under the MIT license. */
(function(global,$){
	if (typeof $ === 'undefined'){
	throwError('Pagination requires jQuery.');
}
var pluginName = 'pagination';
	var pluginHookMethod = 'addHook';
	var eventPrefix = '__pagination-';
	// Conflict,use backup if ($.fn.pagination){
	pluginName = 'pagination2';
}
$.fn[pluginName] = function(options){
	if (typeof options === 'undefined'){
	return this;
}
var container = $(this);
	var pagination ={
	initialize:function(){
	var self = this;
	// Save attributes of current instance if (!container.data('pagination')){
	container.data('pagination',{
}
);
}
// Before initialize if (self.callHook('beforeInit') === false) return;
	// If pagination has been initialized,destroy it if (container.data('pagination').initialized){
	$('.paginationjs',container).remove();
}
// Whether to disable Pagination at the initialization self.disabled = !!attributes.disabled;
	// Passed to the callback function var model = self.model ={
	pageRange:attributes.pageRange,pageSize:attributes.pageSize}
;
	// "dataSource"`s type is unknown,parse it to find true data self.parseDataSource(attributes.dataSource,function(dataSource){
	// Whether pagination is sync mode self.sync = Helpers.isArray(dataSource);
	if (self.sync){
	model.totalNumber = attributes.totalNumber = dataSource.length;
}
// Obtain the total number of pages model.totalPage = self.getTotalPage();
	// Less than one page if (attributes.hideWhenLessThanOnePage){
	if (model.totalPage <= 1) return;
}
var el = self.render(true);
	// Extra className if (attributes.className){
	el.addClass(attributes.className);
}
model.el = el;
	// Load template container[attributes.position === 'bottom' ? 'append':'prepend'](el);
	// Binding events self.observer();
	// initialized flag container.data('pagination').initialized = true;
	// After initialized self.callHook('afterInit',el);
}
);
}
,render:function(isBoot){
	var self = this;
	var model = self.model;
	var el = model.el || $('<div class="paginationjs"></div>');
	var isForced = isBoot !== true;
	// Before render self.callHook('beforeRender',isForced);
	var currentPage = model.pageNumber || attributes.pageNumber;
	var pageRange = attributes.pageRange;
	var totalPage = model.totalPage;
	var rangeStart = currentPage - pageRange;
	var rangeEnd = currentPage + pageRange;
	if (rangeEnd > totalPage){
	rangeEnd = totalPage;
	rangeStart = totalPage - pageRange * 2;
	rangeStart = rangeStart < 1 ? 1:rangeStart;
}
if (rangeStart <= 1){
	rangeStart = 1;
	rangeEnd = Math.min(pageRange * 2 + 1,totalPage);
}
el.html(self.createTemplate({
	currentPage:currentPage,pageRange:pageRange,totalPage:totalPage,rangeStart:rangeStart,rangeEnd:rangeEnd}
));
	// After render self.callHook('afterRender',isForced);
	return el;
}
,// Create template createTemplate:function(args){
	var self = this;
	var currentPage = args.currentPage;
	var totalPage = args.totalPage;
	var rangeStart = args.rangeStart;
	var rangeEnd = args.rangeEnd;
	var totalNumber = attributes.totalNumber;
	var showPrevious = attributes.showPrevious;
	var showNext = attributes.showNext;
	var showPageNumbers = attributes.showPageNumbers;
	var showNavigator = attributes.showNavigator;
	var showGoInput = attributes.showGoInput;
	var showGoButton = attributes.showGoButton;
	var pageLink = attributes.pageLink;
	var prevText = attributes.prevText;
	var nextText = attributes.nextText;
	var ellipsisText = attributes.ellipsisText;
	var goButtonText = attributes.goButtonText;
	var classPrefix = attributes.classPrefix;
	var activeClassName = attributes.activeClassName;
	var disableClassName = attributes.disableClassName;
	var ulClassName = attributes.ulClassName;
	var formatNavigator = $.isFunction(attributes.formatNavigator) ? attributes.formatNavigator():attributes.formatNavigator;
	var formatGoInput = $.isFunction(attributes.formatGoInput) ? attributes.formatGoInput():attributes.formatGoInput;
	var formatGoButton = $.isFunction(attributes.formatGoButton) ? attributes.formatGoButton():attributes.formatGoButton;
	var autoHidePrevious = $.isFunction(attributes.autoHidePrevious) ? attributes.autoHidePrevious():attributes.autoHidePrevious;
	var autoHideNext = $.isFunction(attributes.autoHideNext) ? attributes.autoHideNext():attributes.autoHideNext;
	var header = $.isFunction(attributes.header) ? attributes.header():attributes.header;
	var footer = $.isFunction(attributes.footer) ? attributes.footer():attributes.footer;
	var html = '';
	var goInput = '<input type="text" class="J-paginationjs-go-pagenumber">';
	var goButton = '<input type="button" class="J-paginationjs-go-button" value="'+ goButtonText +'">';
	var formattedString;
	var i;
	if (header){
	formattedString = self.replaceVariables(header,{
	currentPage:currentPage,totalPage:totalPage,totalNumber:totalNumber}
);
	html += formattedString;
}
if (showPrevious || showPageNumbers || showNext){
	html += '<div class="paginationjs-pages">';
	if (ulClassName){
	html += '<ul class="'+ ulClassName +'">';
}
else{
	html += '<ul>';
}
// Previous page button if (showPrevious){
	if (currentPage === 1){
	if (!autoHidePrevious){
	html += '<li class="'+ classPrefix +'-prev '+ disableClassName +'"><a>'+ prevText +'<\/a><\/li>';
}
}
else{
	html += '<li class="'+ classPrefix +'-prev J-paginationjs-previous" data-num="'+ (currentPage - 1) +'" title="Previous page"><a href="'+ pageLink +'">'+ prevText +'<\/a><\/li>';
}
}
// Page numbers if (showPageNumbers){
	if (rangeStart <= 3){
	for(i = 1;
	i < rangeStart;
	i++){
	if (i == currentPage){
	html += '<li class="'+ classPrefix +'-page J-paginationjs-page '+ activeClassName +'" data-num="'+ i +'"><a>'+ i +'<\/a><\/li>';
}
else{
	html += '<li class="'+ classPrefix +'-page J-paginationjs-page" data-num="'+ i +'"><a href="'+ pageLink +'">'+ i +'<\/a><\/li>';
}
}
}
else{
	if (attributes.showFirstOnEllipsisShow){
	html += '<li class="'+ classPrefix +'-page '+ classPrefix +'-first J-paginationjs-page" data-num="1"><a href="'+ pageLink +'">1<\/a><\/li>';
}
html += '<li class="'+ classPrefix +'-ellipsis '+ disableClassName +'"><a>'+ ellipsisText +'<\/a><\/li>';
}
// Main loop for(i = rangeStart;
	i <= rangeEnd;
	i++){
	if (i == currentPage){
	html += '<li class="'+ classPrefix +'-page J-paginationjs-page '+ activeClassName +'" data-num="'+ i +'"><a>'+ i +'<\/a><\/li>';
}
else{
	html += '<li class="'+ classPrefix +'-page J-paginationjs-page" data-num="'+ i +'"><a href="'+ pageLink +'">'+ i +'<\/a><\/li>';
}
}
if (rangeEnd >= totalPage - 2){
	for(i = rangeEnd + 1;
	i <= totalPage;
	i++){
	html += '<li class="'+ classPrefix +'-page J-paginationjs-page" data-num="'+ i +'"><a href="'+ pageLink +'">'+ i +'<\/a><\/li>';
}
}
else{
	html += '<li class="'+ classPrefix +'-ellipsis '+ disableClassName +'"><a>'+ ellipsisText +'<\/a><\/li>';
	if (attributes.showLastOnEllipsisShow){
	html += '<li class="'+ classPrefix +'-page '+ classPrefix +'-last J-paginationjs-page" data-num="'+ totalPage +'"><a href="'+ pageLink +'">'+ totalPage +'<\/a><\/li>';
}
}
}
// Next page button if (showNext){
	if (currentPage == totalPage){
	if (!autoHideNext){
	html += '<li class="'+ classPrefix +'-next '+ disableClassName +'"><a>'+ nextText +'<\/a><\/li>';
}
}
else{
	html += '<li class="'+ classPrefix +'-next J-paginationjs-next" data-num="'+ (currentPage + 1) +'" title="Next page"><a href="'+ pageLink +'">'+ nextText +'<\/a><\/li>';
}
}
html += '<\/ul><\/div>';
}
// Navigator if (showNavigator){
	if (formatNavigator){
	formattedString = self.replaceVariables(formatNavigator,{
	currentPage:currentPage,totalPage:totalPage,totalNumber:totalNumber}
);
	html += '<div class="'+ classPrefix +'-nav J-paginationjs-nav">'+ formattedString +'<\/div>';
}
}
// Go input if (showGoInput){
	if (formatGoInput){
	formattedString = self.replaceVariables(formatGoInput,{
	currentPage:currentPage,totalPage:totalPage,totalNumber:totalNumber,input:goInput}
);
	html += '<div class="'+ classPrefix +'-go-input">'+ formattedString +'</div>';
}
}
// Go button if (showGoButton){
	if (formatGoButton){
	formattedString = self.replaceVariables(formatGoButton,{
	currentPage:currentPage,totalPage:totalPage,totalNumber:totalNumber,button:goButton}
);
	html += '<div class="'+ classPrefix +'-go-button">'+ formattedString +'</div>';
}
}
if (footer){
	formattedString = self.replaceVariables(footer,{
	currentPage:currentPage,totalPage:totalPage,totalNumber:totalNumber}
);
	html += formattedString;
}
return html;
}
,// Go to the specified page go:function(number,callback){
	var self = this;
	var model = self.model;
	if (self.disabled) return;
	var pageNumber = number;
	var pageSize = attributes.pageSize;
	var totalPage = model.totalPage;
	pageNumber = parseInt(pageNumber);
	// Page number out of bounds if (!pageNumber || pageNumber < 1 || pageNumber > totalPage) return;
	// Sync mode if (self.sync){
	render(self.getDataSegment(pageNumber));
	return;
}
var postData ={
}
;
	var alias = attributes.alias ||{
}
;
	postData[alias.pageSize ? alias.pageSize:'pageSize'] = pageSize;
	postData[alias.pageNumber ? alias.pageNumber:'pageNumber'] = pageNumber;
	var formatAjaxParams ={
	type:'get',cache:false,data:{
}
,contentType:'application/x-www-form-urlencoded;
	charset=UTF-8',dataType:'json',async:true}
;
	$.extend(true,formatAjaxParams,attributes.ajax);
	$.extend(formatAjaxParams.data ||{
}
,postData);
	formatAjaxParams.url = attributes.dataSource;
	formatAjaxParams.success = function(response){
	render(self.filterDataByLocator(response));
}
;
	formatAjaxParams.error = function(jqXHR,textStatus,errorThrown){
	attributes.formatAjaxError && attributes.formatAjaxError(jqXHR,textStatus,errorThrown);
	self.enable();
}
;
	self.disable();
	$.ajax(formatAjaxParams);
	function render(data){
	// Before paging if (self.callHook('beforePaging',pageNumber) === false) return false;
	// Pagination direction model.direction = typeof model.pageNumber === 'undefined' ? 0:(pageNumber > model.pageNumber ? 1:-1);
	model.pageNumber = pageNumber;
	self.render();
	if (self.disabled && !self.sync){
	// enable self.enable();
}
// cache model data container.data('pagination').model = model;
	// format result before execute callback if ($.isFunction(attributes.formatResult)){
	var cloneData = $.extend(true,[],data);
	if (!Helpers.isArray(data = attributes.formatResult(cloneData))){
	data = cloneData;
}
}
container.data('pagination').currentPageData = data;
	// callback self.doCallback(data,callback);
	// After pageing self.callHook('afterPaging',pageNumber);
	// Already the first page if (pageNumber == 1){
	self.callHook('afterIsFirstPage');
}
// Already the last page if (pageNumber == model.totalPage){
	self.callHook('afterIsLastPage');
}
}
}
,doCallback:function(data,customCallback){
	var self = this;
	var model = self.model;
	if ($.isFunction(customCallback)){
	customCallback(data,model);
}
else if ($.isFunction(attributes.callback)){
	attributes.callback(data,model);
}
}
,destroy:function(){
	// Before destroy if (this.callHook('beforeDestroy') === false) return;
	this.model.el.remove();
	container.off();
	// Remove style element $('#paginationjs-style').remove();
	// After destroy this.callHook('afterDestroy');
}
,previous:function(callback){
	this.go(this.model.pageNumber - 1,callback);
}
,next:function(callback){
	this.go(this.model.pageNumber + 1,callback);
}
,disable:function(){
	var self = this;
	var source = self.sync ? 'sync':'async';
	// Before disable if (self.callHook('beforeDisable',source) === false) return;
	self.disabled = true;
	self.model.disabled = true;
	// After disable self.callHook('afterDisable',source);
}
,enable:function(){
	var self = this;
	var source = self.sync ? 'sync':'async';
	// Before enable if (self.callHook('beforeEnable',source) === false) return;
	self.disabled = false;
	self.model.disabled = false;
	// After enable self.callHook('afterEnable',source);
}
,refresh:function(callback){
	this.go(this.model.pageNumber,callback);
}
,show:function(){
	var self = this;
	if (self.model.el.is(':visible')) return;
	self.model.el.show();
}
,hide:function(){
	var self = this;
	if (!self.model.el.is(':visible')) return;
	self.model.el.hide();
}
,// Replace the variables of template replaceVariables:function(template,variables){
	var formattedString;
	for(var key in variables){
	var value = variables[key];
	var regexp = new RegExp('<%=\\s*'+ key +'\\s*%>','img');
	formattedString = (formattedString || template).replace(regexp,value);
}
return formattedString;
}
,// Get data segments getDataSegment:function(number){
	var pageSize = attributes.pageSize;
	var dataSource = attributes.dataSource;
	var totalNumber = attributes.totalNumber;
	var start = pageSize * (number - 1) + 1;
	var end = Math.min(number * pageSize,totalNumber);
	return dataSource.slice(start - 1,end);
}
,// Get total page getTotalPage:function(){
	return Math.ceil(attributes.totalNumber / attributes.pageSize);
}
,// Get locator getLocator:function(locator){
	var result;
	if (typeof locator === 'string'){
	result = locator;
}
else if ($.isFunction(locator)){
	result = locator();
}
else{
	throwError('"locator" is incorrect. (String | Function)');
}
return result;
}
,// Filter data by "locator" filterDataByLocator:function(dataSource){
	var locator = this.getLocator(attributes.locator);
	var filteredData;
	// Data source is an Object,use "locator" to locate the true data if (Helpers.isObject(dataSource)){
	try{
	$.each(locator.split('.'),function(index,item){
	filteredData = (filteredData ? filteredData:dataSource)[item];
}
);
}
catch(e){
}
if (!filteredData){
	throwError('dataSource.'+ locator +' is undefined.');
}
else if (!Helpers.isArray(filteredData)){
	throwError('dataSource.'+ locator +' must be an Array.');
}
}
return filteredData || dataSource;
}
,// Parse dataSource parseDataSource:function(dataSource,callback){
	var self = this;
	var args = arguments;
	if (Helpers.isObject(dataSource)){
	callback(attributes.dataSource = self.filterDataByLocator(dataSource));
}
else if (Helpers.isArray(dataSource)){
	callback(attributes.dataSource = dataSource);
}
else if ($.isFunction(dataSource)){
	attributes.dataSource(function(data){
	if ($.isFunction(data)){
	throwError('Unexpect parameter of the "done" Function.');
}
args.callee.call(self,data,callback);
}
);
}
else if (typeof dataSource === 'string'){
	if (/^https?|file:/.test(dataSource)){
	attributes.ajaxDataType = 'jsonp';
}
callback(dataSource);
}
else{
	throwError('Unexpect data type of the "dataSource".');
}
}
,callHook:function(hook){
	var paginationData = container.data('pagination');
	var result;
	var args = Array.prototype.slice.apply(arguments);
	args.shift();
	if (attributes[hook] && $.isFunction(attributes[hook])){
	if (attributes[hook].apply(global,args) === false){
	result = false;
}
}
if (paginationData.hooks && paginationData.hooks[hook]){
	$.each(paginationData.hooks[hook],function(index,item){
	if (item.apply(global,args) === false){
	result = false;
}
}
);
}
return result !== false;
}
,observer:function(){
	var self = this;
	var el = self.model.el;
	// Go to page container.on(eventPrefix + 'go',function(event,pageNumber,done){
	pageNumber = parseInt($.trim(pageNumber));
	if (!pageNumber) return;
	if (!$.isNumeric(pageNumber)){
	throwError('"pageNumber" is incorrect. (Number)');
}
self.go(pageNumber,done);
}
);
	// Page click el.delegate('.J-paginationjs-page','click',function(event){
	var current = $(event.currentTarget);
	var pageNumber = $.trim(current.attr('data-num'));
	if (!pageNumber || current.hasClass(attributes.disableClassName) || current.hasClass(attributes.activeClassName)) return;
	// Before page button clicked if (self.callHook('beforePageOnClick',event,pageNumber) === false) return false;
	self.go(pageNumber);
	// After page button clicked self.callHook('afterPageOnClick',event,pageNumber);
	if (!attributes.pageLink) return false;
}
);
	// Previous click el.delegate('.J-paginationjs-previous','click',function(event){
	var current = $(event.currentTarget);
	var pageNumber = $.trim(current.attr('data-num'));
	if (!pageNumber || current.hasClass(attributes.disableClassName)) return;
	// Before previous clicked if (self.callHook('beforePreviousOnClick',event,pageNumber) === false) return false;
	self.go(pageNumber);
	// After previous clicked self.callHook('afterPreviousOnClick',event,pageNumber);
	if (!attributes.pageLink) return false;
}
);
	// Next click el.delegate('.J-paginationjs-next','click',function(event){
	var current = $(event.currentTarget);
	var pageNumber = $.trim(current.attr('data-num'));
	if (!pageNumber || current.hasClass(attributes.disableClassName)) return;
	// Before next clicked if (self.callHook('beforeNextOnClick',event,pageNumber) === false) return false;
	self.go(pageNumber);
	// After next clicked self.callHook('afterNextOnClick',event,pageNumber);
	if (!attributes.pageLink) return false;
}
);
	// Go button click el.delegate('.J-paginationjs-go-button','click',function(){
	var pageNumber = $('.J-paginationjs-go-pagenumber',el).val();
	// Before Go button clicked if (self.callHook('beforeGoButtonOnClick',event,pageNumber) === false) return false;
	container.trigger(eventPrefix + 'go',pageNumber);
	// After Go button clicked self.callHook('afterGoButtonOnClick',event,pageNumber);
}
);
	// go input enter el.delegate('.J-paginationjs-go-pagenumber','keyup',function(event){
	if (event.which === 13){
	var pageNumber = $(event.currentTarget).val();
	// Before Go input enter if (self.callHook('beforeGoInputOnEnter',event,pageNumber) === false) return false;
	container.trigger(eventPrefix + 'go',pageNumber);
	// Regains focus $('.J-paginationjs-go-pagenumber',el).focus();
	// After Go input enter self.callHook('afterGoInputOnEnter',event,pageNumber);
}
}
);
	// Previous page container.on(eventPrefix + 'previous',function(event,done){
	self.previous(done);
}
);
	// Next page container.on(eventPrefix + 'next',function(event,done){
	self.next(done);
}
);
	// Disable container.on(eventPrefix + 'disable',function(){
	self.disable();
}
);
	// Enable container.on(eventPrefix + 'enable',function(){
	self.enable();
}
);
	// Refresh container.on(eventPrefix + 'refresh',function(event,done){
	self.refresh(done);
}
);
	// Show container.on(eventPrefix + 'show',function(){
	self.show();
}
);
	// Hide container.on(eventPrefix + 'hide',function(){
	self.hide();
}
);
	// Destroy container.on(eventPrefix + 'destroy',function(){
	self.destroy();
}
);
	// Whether to load the default page if (attributes.triggerPagingOnInit){
	container.trigger(eventPrefix + 'go',Math.min(attributes.pageNumber,self.model.totalPage));
}
}
}
;
	// If initial if (container.data('pagination') && container.data('pagination').initialized === true){
	// Handling events if ($.isNumeric(options)){
	// container.pagination(5) container.trigger.call(this,eventPrefix + 'go',options,arguments[1]);
	return this;
}
else if (typeof options === 'string'){
	var args = Array.prototype.slice.apply(arguments);
	args[0] = eventPrefix + args[0];
	switch(options){
	case 'previous':case 'next':case 'go':case 'disable':case 'enable':case 'refresh':case 'show':case 'hide':case 'destroy':container.trigger.apply(this,args);
	break;
	// Get selected page number case 'getSelectedPageNum':if (container.data('pagination').model){
	return container.data('pagination').model.pageNumber;
}
else{
	return container.data('pagination').attributes.pageNumber;
}
// Get total page case 'getTotalPage':return container.data('pagination').model.totalPage;
	// Get selected page data case 'getSelectedPageData':return container.data('pagination').currentPageData;
	// Whether pagination was be disabled case 'isDisabled':return container.data('pagination').model.disabled === true;
	default:throwError('Pagination do not provide action:' + options);
}
return this;
}
}
else{
	if (!Helpers.isObject(options)){
	throwError('Illegal options');
}
}
// Attributes var attributes = $.extend({
}
,arguments.callee.defaults,options);
	// Check parameters parameterChecker(attributes);
	pagination.initialize();
	return this;
}
;
	// Instance defaults $.fn[pluginName].defaults ={
	// Data source // Array | String | Function | Object //dataSource:'',// String | Function //locator:'data',// Total entries,must be specified when the pagination is asynchronous totalNumber:1,// Default page pageNumber:1,// entries of per page pageSize:10,// Page range (pages on both sides of the current page) pageRange:2,// Whether to display the 'Previous' button showPrevious:true,// Whether to display the 'Next' button showNext:true,// Whether to display the page buttons showPageNumbers:true,showNavigator:false,// Whether to display the 'Go' input showGoInput:false,// Whether to display the 'Go' button showGoButton:false,// Page link pageLink:'',// 'Previous' text prevText:'&laquo;
	',// 'Next' text nextText:'&raquo;
	',// Ellipsis text ellipsisText:'...',// 'Go' button text goButtonText:'Go',// Additional className for Pagination element //className:'',classPrefix:'paginationjs',// Default active class activeClassName:'active',// Default disable class disableClassName:'disabled',//ulClassName:'',// Whether to insert inline style inlineStyle:true,formatNavigator:'<%= currentPage %> / <%= totalPage %>',formatGoInput:'<%= input %>',formatGoButton:'<%= button %>',// Pagination element's position in the container position:'bottom',// Auto hide previous button when current page is the first page autoHidePrevious:false,// Auto hide next button when current page is the last page autoHideNext:false,//header:'',//footer:'',// Aliases for custom pagination parameters //alias:{
}
,// Whether to trigger pagination at initialization triggerPagingOnInit:true,// Whether to hide pagination when less than one page hideWhenLessThanOnePage:false,showFirstOnEllipsisShow:true,showLastOnEllipsisShow:true,// Pagging callback callback:function(){
}
}
;
	// Hook register $.fn[pluginHookMethod] = function(hook,callback){
	if (arguments.length < 2){
	throwError('Missing argument.');
}
if (!$.isFunction(callback)){
	throwError('callback must be a function.');
}
var container = $(this);
	var paginationData = container.data('pagination');
	if (!paginationData){
	container.data('pagination',{
}
);
	paginationData = container.data('pagination');
}
!paginationData.hooks && (paginationData.hooks ={
}
);
	//paginationData.hooks[hook] = callback;
	paginationData.hooks[hook] = paginationData.hooks[hook] || [];
	paginationData.hooks[hook].push(callback);
}
;
	// Static method $[pluginName] = function(selector,options){
	if (arguments.length < 2){
	throwError('Requires two parameters.');
}
var container;
	// 'selector' is a jQuery object if (typeof selector !== 'string' && selector instanceof jQuery){
	container = selector;
}
else{
	container = $(selector);
}
if (!container.length) return;
	container.pagination(options);
	return container;
}
;
	// ============================================================ // helpers // ============================================================ var Helpers ={
}
;
	// Throw error function throwError(content){
	throw new Error('Pagination:'+ content);
}
// Check parameters function parameterChecker(args){
	if (!args.dataSource){
	throwError('"dataSource" is required.');
}
if (typeof args.dataSource === 'string'){
	if (typeof args.totalNumber === 'undefined'){
	throwError('"totalNumber" is required.');
}
else if (!$.isNumeric(args.totalNumber)){
	throwError('"totalNumber" is incorrect. (Number)');
}
}
else if (Helpers.isObject(args.dataSource)){
	if (typeof args.locator === 'undefined'){
	throwError('"dataSource" is an Object,please specify "locator".');
}
else if (typeof args.locator !== 'string' && !$.isFunction(args.locator)){
	throwError(''+ args.locator +' is incorrect. (String | Function)');
}
}
}
// Object type detection function getObjectType(object,tmp){
	return ( (tmp = typeof(object)) == "object" ? object == null && "null" || Object.prototype.toString.call(object).slice(8,-1):tmp ).toLowerCase();
}
$.each(['Object','Array'],function(index,name){
	Helpers['is' + name] = function(object){
	return getObjectType(object) === name.toLowerCase();
}
;
}
);
	/* * export via AMD or CommonJS * */
 if (typeof define === 'function' && define.amd){
	define(function(){
	return $;
}
);
}
}
)(this,window.jQuery);

CSS代码(default.css):

@import url(http://fonts.useso.com/css?family=Raleway:200,500,700,800);@font-face{font-family:'icomoon';src:url('../fonts/icomoon.eot?rretjt');src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'),url('../fonts/icomoon.woff?rretjt') format('woff'),url('../fonts/icomoon.ttf?rretjt') format('truetype'),url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');font-weight:normal;font-style:normal;}
[class^="icon-"],[class*=" icon-"]{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;/* Better Font Rendering =========== */
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#f2f2f2;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:#2fa0ec;text-decoration:none;outline:none;}
a:hover,a:focus{color:#74777b;}
.htmleaf-container{margin:0 auto;overflow:hidden;}
.bgcolor-1{background:#f0efee;}
.bgcolor-2{background:#f9f9f9;}
.bgcolor-3{background:#e8e8e8;}
/*light grey*/
.bgcolor-4{background:#2f3238;color:#fff;}
/*Dark grey*/
.bgcolor-5{background:#df6659;color:#521e18;}
/*pink1*/
.bgcolor-6{background:#2fa8ec;}
/*sky blue*/
.bgcolor-7{background:#d0d6d6;}
/*White tea*/
.bgcolor-8{background:#3d4444;color:#fff;}
/*Dark grey2*/
.bgcolor-9{background:#ef3f52;color:#fff;}
/*pink2*/
.bgcolor-10{background:#64448f;color:#fff;}
/*Violet*/
.bgcolor-11{background:#3755ad;color:#fff;}
/*dark blue*/
.bgcolor-12{background:#3498DB;color:#fff;}
/*light blue*/
.bgcolor-20{background:#494A5F;color:#D5D6E2;}
/* Header */
.htmleaf-header{padding:1em 190px 1em;letter-spacing:-1px;text-align:center;background:#66677c;}
.htmleaf-header h1{color:#D5D6E2;font-weight:600;font-size:2em;line-height:1;margin-bottom:0;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
.htmleaf-header h1 span{font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;display:block;font-size:60%;font-weight:400;padding:0.8em 0 0.5em 0;color:#c3c8cd;}
/*nav*/
.htmleaf-demo a{color:#1d7db1;text-decoration:none;}
.htmleaf-demo{width:100%;padding-bottom:1.2em;}
.htmleaf-demo a{display:inline-block;margin:0.5em;padding:0.6em 1em;border:3px solid #1d7db1;font-weight:700;}
.htmleaf-demo a:hover{opacity:0.6;}
.htmleaf-demo a.current{background:#1d7db1;color:#fff;}
/* Top Navigation Style */
.htmleaf-links{position:relative;display:inline-block;white-space:nowrap;font-size:1.5em;text-align:center;}
.htmleaf-links::after{position:absolute;top:0;left:50%;margin-left:-1px;width:2px;height:100%;background:#dbdbdb;content:'';-webkit-transform:rotate3d(0,0,1,22.5deg);transform:rotate3d(0,0,1,22.5deg);}
.htmleaf-icon{display:inline-block;margin:0.5em;padding:0em 0;width:1.5em;text-decoration:none;}
.htmleaf-icon span{display:none;}
.htmleaf-icon:before{margin:0 5px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'icomoon';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
/* footer */
.htmleaf-footer{width:100%;padding-top:10px;}
.htmleaf-small{font-size:0.8em;}
.center{text-align:center;}
/*.info{display:block;padding:1.5em 2em;border-radius:10px;font-weight:normal;font-size:1.25em;margin:0 auto;letter-spacing:0px;text-align:left;max-width:700px;background:rgba(0,0,0,0.2);margin:0.5em;-webkit-flex:1 1 auto;flex:none;}
.info--desktop{color:#f48fb1;}
*/
/****/
.related{color:#fff;background:#494A5F;text-align:center;font-size:1.25em;padding:0.5em 0;overflow:hidden;}
.related > a{vertical-align:top;width:calc(100% - 20px);max-width:340px;display:inline-block;text-align:center;margin:20px 10px;padding:25px;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
.related a{display:inline-block;text-align:left;margin:20px auto;padding:10px 20px;opacity:0.8;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;-webkit-backface-visibility:hidden;}
.related a:hover,.related a:active{opacity:1;}
.related a img{max-width:100%;opacity:0.8;border-radius:4px;}
.related a:hover img,.related a:active img{opacity:1;}
.related h3{font-family:"Microsoft YaHei",sans-serif;}
.related a h3{font-weight:300;margin-top:0.15em;color:#fff;}
/* icomoon */
.icon-htmleaf-home-outline:before{content:"\e5000";}
.icon-htmleaf-arrow-forward-outline:before{content:"\e5001";}
@media screen and (max-width:50em){.htmleaf-header{padding:3em 10% 4em;}
.htmleaf-header h1{font-size:2em;}
}
@media screen and (max-width:40em){.htmleaf-header h1{font-size:1.5em;}
}
@media screen and (max-width:30em){.htmleaf-header h1{font-size:1.2em;}
}

附件:下载该文件资源,减少时间成本(增值服务)