第一次做的插件，早写好了，后来发现一个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, //显示多少个分页码（不包括前一页，后一页）,mode=default时该值需设置为5以上
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 + pagetext + ;
}
return + pagetext + ;
},
//选中状态a元素
formatstrindex : function(pageno){
return + pageno + ;
},
//默认模板初始化页码集合
initdefaultlist : function(_pageindex){
if(this.op.listcountthrow 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 ns.push(i);
}
for (j = 0; j numlist[j + 2] = ns[j];
}
}
for (i = pageindex - infront; i ns.push(i);
}
for (j = 0; j numlist[j + 2] = ns[j];
}
} else {
if (this.pagecount >= this.op.listcount) {
for (i = 0; i numlist[i] = i+1;
}
} else {
for (i = 0; i numlist[i] = i+1;
}
}
}
return numlist;
},
//生成页码
initpager : function(pageindex){
$(#+this.op.pagername).html('');
if(this.op.enablefirst==false&&this.pagecountreturn 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;iif(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$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）：
复制代码 代码如下:
有三种方式，一个是页面中数据容器有全部数据，这时就是mode:'static'。还有就是ajax按分页方式取数据时，mode:'ajax'，还有根据url传参分页mode:'url'（我感觉这时估计不会用到吧）。
首先静态的：
html:
复制代码 代码如下:
1aaaaaaaaaaaaaaaaaaaaaa
2aaaaaaaaaaaaaaaaaaaaaa
3aaaaaaaaaaaaaaaaaaaaaa
4aaaaaaaaaaaaaaaaaaaaaa
5aaaaaaaaaaaaaaaaaaaaaa
6aaaaaaaaaaaaaaaaaaaaaa
7aaaaaaaaaaaaaaaaaaaaaa
8aaaaaaaaaaaaaaaaaaaaaa
9aaaaaaaaaaaaaaaaaaaaaa
js代码：
复制代码 代码如下:
$(function(){
$(#tablepager).amsetpager({viewcount:2,mode:static,listcount:6});
})
这里也可以设置callback，和下面类似截图：
ajax的：
html:
复制代码 代码如下:
后台获取实例数据：
复制代码 代码如下:
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 list = new list();
for (int i = 1; i {
list.add(index + _ + i + ....................);
}
javascriptserializer ser = new javascriptserializer();
context.response.write(ser.serialize(list));
context.response.end();
}
js代码：
复制代码 代码如下:
截图：
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
插件写的可能有点臃肿，很多地方也不合理。希望大家下载试试，提提意见，让一个菜鸟能成长，谢啦