jquery分页插件AmSetPager(自写)

第一次做的插件，早写好了，后来发现一个jquery插件模板，就拿过来套。名字叫jquery.boilerplate.js。我的理解不是很深，也不太理解太多效率问题。

本来我是一个做asp.net开发的，可是公司好些个人包括美工没太会js啊。项目很多js改来改去搞得我都头大了。萌发了写插件的想法，于是照葫芦画瓢写啊，写插件的过程也学了js的面向对象。对js，还有一些效率问题有了更深了解。以前有个项目单个页面写过600多行的js文件。全是按功能面向过程写的。乱的不堪回首啊好吧先是说一下插件吧。

插件叫AmSetPager，首先是看一下样子：

此处下载：点击下载
我这个插件好像使用有些另类，是调用数据展示容器的元素$("#DataContent").AmSetPager({...});在参数中配置分页容器元素ID。写完插件后看别的插件都是调用分页元素ID

贴下源码：

(function ( $, window, document, undefined ) { 
// Create the defaults once 
var pluginName = "AmSetPager", 
defaults = { 
pagerName: "pager", //分页的容器 
viewCount: 5, //可显示多少条数据 
dataCount: 0, //如果后台取数据，总数多少（静态的不用） 
selectClass: "selectno", //选中的样式 listCount:10, //显示多少个分页码（不包括前一页，后一页）<SPAN style="FONT-FAMILY: Arial, Helvetica, sans-serif">,mode=default时该值需设置为5以上</SPAN> 
enablePrevNext:true, //允许显示前一页后一页 
enableFirst:true, //允许只有一页的情况下显示页码 
template:"default", //模板（现只有default） 
mode:"static", //"url" or "ajax" 
urlparameter:"", //url参数,后面aa=1&bb=2... 
callback:null //回调函数（ajax取数据或者静态也可以使用） 
}; 
// The actual plugin constructor 
function Plugin( element, options ) { 
this.element = element; 
this.options = $.extend( {}, defaults, options ); 
//this._defaults = defaults; 
this._name = pluginName; 
this.init(); 
} 
//private 
//获取url参数 
var getQueryString = function (name) { 
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
var r = window.location.search.substr(1).match(reg); 
if (r != null) return unescape(r[2]); return undefined; 
} 
//静态模板数据展示 
var Bind_StaticData = function($content,minnum,maxnum) { 
if (minnum > 0) { 
$content.children(":gt(" + (minnum - 1) + "):lt(" + maxnum + ")").css("display", "block"); 
} else { 
$content.children(":lt(" + maxnum + ")").css("display", "block"); 
} 
$content.children(":lt(" + (minnum) + ")").css("display", "none"); 
$content.children(":gt(" + (maxnum - 1) + ")").css("display", "none"); 
} 
//主要 
//创建SetPager类 
var SetPager = function (options,pageCount){ 
this.op = options; 
this.pageCount = pageCount; 
} 
SetPager.prototype = { 
//格式化成a元素 
FormatStr : function(pageNo, pageText) { 
var href = this.op.mode=='url'?location.pathname+"?"+this.op.urlparameter+"&p="+pageNo:"javascript:void(0);"; 
if (typeof (pageText) == "number") { 
return "<a href='"+href+"' >" + pageText + "</a>"; 
} 
return "<a href='"+href+"' i='" + pageNo + "'>" + pageText + "</a>"; 
}, 
//选中状态a元素 
FormatStrIndex : function(pageNo){ 
return "<span class='"+this.op.selectClass+"'>" + pageNo + "</span>"; 
}, 
//默认模板初始化页码集合 
InitDefaultList : function(_pageIndex){ 
if(this.op.listCount<5) 
throw new Error("listCount must be lager than 5"); //listCount>5 
var pageIndex = parseFloat(_pageIndex); //转化为number 
var ns = new Array(); 
var numList = new Array(this.op.listCount); 
if (pageIndex >= this.op.listCount) { 
numList[0] = 1; 
numList[1] = "…"; 
var infront = 0; 
var inback = 0; 
var inflag = Math.floor((this.op.listCount-2)/2); 
if(this.op.listCount%2==0){ 
infront = inflag-1; 
inback = inflag; 
}else{ 
infront = inflag; 
inback = inflag; 
} 
if (pageIndex + inback >= this.pageCount) { 
for (i = this.pageCount - (this.op.listCount-3); i < this.pageCount + 1; i++) { 
ns.push(i); 
} 
for (j = 0; j <= (this.op.listCount-3); j++) { 
numList[j + 2] = ns[j]; 
} 
} 
for (i = pageIndex - infront; i <= pageIndex + inback; i++) { 
ns.push(i); 
} 
for (j = 0; j < (this.op.listCount-2); j++) { 
numList[j + 2] = ns[j]; 
} 
} else { 
if (this.pageCount >= this.op.listCount) { 
for (i = 0; i < this.op.listCount; i++) { 
numList[i] = i+1; 
} 
} else { 
for (i = 0; i < this.pageCount; i++) { 
numList[i] = i+1; 
} 
} 
} 
return numList; 
}, 
//生成页码 
InitPager : function(pageIndex){ 
$("#"+this.op.pagerName).html(''); 
if(this.op.enableFirst==false&&this.pageCount<=1){ 
return null; 
} 
var array = new Array(); 
//var finalarr = new Array(); 
var $con = $("#"+this.op.pagerName); 
switch(this.op.template){ //选择模板 
case 'default':array = this.InitDefaultList(pageIndex,this.pageCount);break; 
default:array = this.InitDefaultList(pageIndex,this.pageCount); 
} 
if(!array instanceof Array){ 
throw new Error("is not array"); 
} 
if(array.length!=this.op.listCount){ 
throw new Error("array.length error:"+array.length); 
} 
if(pageIndex>1&&this.op.enablePrevNext){ 
$con.append(this.FormatStr(pageIndex-1,'上一页')); 
} 
for(var i=0;i<array.length;i++){ 
if(typeof array[i]=='undefined'){ 
continue; 
} 
if(pageIndex==array[i]){ 
$con.append(this.FormatStrIndex(array[i])); 
}else if(typeof array[i]=='number'){ 
$con.append(this.FormatStr(array[i],array[i])); 
}else{ 
$con.append(array[i]); 
} 
} 
if(pageIndex<this.pageCount&&this.op.enablePrevNext){ 
$con.append(this.FormatStr(pageIndex+1,'下一页')); 
} 
//$("#"+this.op.pagerName).append(finalarr); 
} 
} 
Plugin.prototype = { 
//初始化 
init: function() { 
var options = this.options; 
var $thisbase = $(this.element); 
var $content; 
if($thisbase.is(':has(tbody)')){ 
$content=$thisbase.children(); 
} 
else{ 
$content=$thisbase; 
} 
var count = options.mode=='static'?$content.children().length:options.dataCount; 
var eachcount = options.viewCount; 
var totalpage = Math.ceil(count / eachcount); 
var $pager = $("#"+options.pagerName); 
var setpager = new SetPager(options,totalpage); //init 
if(options.mode=='url'){ 
var urlindex = getQueryString("p"); 
if(isNaN(urlindex)){ 
setpager.InitPager(1); 
}else{ 
setpager.InitPager(urlindex>totalpage?totalpage:urlindex); 
} 
}else{ 
setpager.InitPager(1); 
if(options.mode=='static'&&typeof options.callback!='function'){ 
Bind_StaticData($content,0,eachcount); 
}else{ 
options.callback($content,1,options.viewCount); 
} 
$pager.bind("click",function(e){ //click事件 
if(e.target.tagName!='A') return; 
var $this = $(e.target); 
$this.removeAttr("href").siblings().attr("href", "javascript:void(0);");//.. 
var indexnum = parseInt($this.html())==$this.html()?parseInt($this.html()):parseInt($this.attr('i')); 
var maxnum = (indexnum * eachcount); 
var minnum = (indexnum - 1) * eachcount; 
if(options.mode!='static'&&options.mode!='ajax'){ 
throw new Error("mode must be selected:static,url,ajax"); 
} 
if(options.mode=='static'&&typeof options.callback!='function'){ 
setpager.InitPager(indexnum); 
Bind_StaticData($content,minnum, maxnum); 
}else{ 
setpager.InitPager(indexnum); 
options.callback($content,indexnum,options.viewCount); 
} 
}); 
} 
} 
}; 

$.fn[pluginName] = function ( options ) { 
return this.each(function () { 
if (!$.data(this, "plugin_" + pluginName)) { 
$.data(this, "plugin_" + pluginName, new Plugin( this, options )); 
} 
}); 
}; 
})( jQuery, window, document );

说一下样式（.pager就是分页元素class）：

<SPAN style="FONT-SIZE: 12px"><style type="text/css"> 
.pager a{ text-decoration: none; border: 1px solid #e7ecf0;color: #15B;} 
.pager a:hover{ background-color:#E6EBEF} 
.pager a,.pager span{display: inline-block;padding: 0.1em 0.4em;margin-right: 5px; margin-bottom: 5px;} 
.selectno{background: #26B;color: #fff;border: 1px solid #AAE;} 
</style></SPAN>

有三种方式，一个是页面中数据容器有全部数据，这时就是mode:'static'。还有就是ajax按分页方式取数据时，mode:'ajax'，还有根据url传参分页mode:'url'（我感觉这时估计不会用到吧）。

首先静态的：

html:

<table id="tablepager" border="0" cellpadding="0" cellspacing="0"> 
<tr><td><p>1aaaaaaaaaaaaaaaaaaaaaa</p></td></tr> 
<tr><td><p>2aaaaaaaaaaaaaaaaaaaaaa</p></td></tr> 
<tr><td><p>3aaaaaaaaaaaaaaaaaaaaaa</p></td></tr> 
<tr><td><p>4aaaaaaaaaaaaaaaaaaaaaa</p></td></tr> 
<tr><td><p>5aaaaaaaaaaaaaaaaaaaaaa</p></td></tr> 
<tr><td><p>6aaaaaaaaaaaaaaaaaaaaaa</p></td></tr> 
<tr><td><p>7aaaaaaaaaaaaaaaaaaaaaa</p></td></tr> 
<tr><td><p>8aaaaaaaaaaaaaaaaaaaaaa</p></td></tr> 
<tr><td><p>9aaaaaaaaaaaaaaaaaaaaaa</p></td></tr> 
</table> 
<div id="pager" class="pager"></div>

js代码：

$(function(){ 
$("#tablepager").AmSetPager({"viewCount":2,"mode":"static","listCount":6}); 
})

这里也可以设置callback，和下面类似截图：

ajax的：

html:

<table id="tablepager" border="0" cellpadding="0" cellspacing="0"> 
</table> 
<div id="pager" class="pager"></div>

后台获取实例数据：

public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
int index = int.Parse(context.Request.QueryString["index"]); 
int viewCount = int.Parse(context.Request.QueryString["viewCount"]); 
List<string> list = new List<string>(); 
for (int i = 1; i <= viewCount; i++) 
{ 
list.Add(index + "_" + i + "...................."); 
} 
JavaScriptSerializer ser = new JavaScriptSerializer(); 
context.Response.Write(ser.Serialize(list)); 
context.Response.End(); 
}

js代码：

<script type="text/javascript"> 
$(function () { 
$("#tablepager").AmSetPager({ "viewCount": 3, "mode": "ajax", "dataCount": 30, "listCount": 6, "callback": function (ev, indexnum, viewCount) {//callback中三个参数分别为：数据容器对象，当前页，显示几条数据 $.getJSON("Handler1.ashx", { "index": indexnum, "viewCount": viewCount }, function (data) { 
ev.html(''); 
for (var i = 0; i < data.length; i++) { 
ev.append("<tr><td>" + data[i] + "</td></tr>"); 
} 
}); 
} 
}); 
}) 
</script>

截图：

url的：
没什么可说的，js代码：

$(function(){ 
$("#tablepager").AmPager({"viewCount":5,"dataCount":50,"mode":"url","listCount":6,"urlparameter":"ss=1&ee=2"}); 
})

urlparameter为传的参数，也必须设置每页显示，和数据总条数。点击页码3，url地址栏为 ：test.htm?ss=1&ee=2&p=3
插件写的可能有点臃肿，很多地方也不合理。希望大家下载试试，提提意见，让一个菜鸟能成长，谢啦