jquery分页插件AmSetPager(自写)_Javascript教程-查字典教程网

jquery分页插件AmSetPager(自写)

摘要：第一次做的插件，早写好了，后来发现一个jquery插件模板，就拿过来套。名字叫jquery.boilerplate.js。我的理解不是很深，...

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

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

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

jquery分页插件AmSetPager(自写)1

此处下载：点击下载

我这个插件好像使用有些另类，是调用数据展示容器的元素$("#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>,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+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）：

复制代码代码如下:

.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:

复制代码代码如下:

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

js代码：

复制代码代码如下:

$(function(){

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

})

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

截图：

jquery分页插件AmSetPager(自写)2

ajax的：

html:

复制代码代码如下:

</table>

后台获取实例数据：

复制代码代码如下:

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代码：

复制代码代码如下:

$(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>

截图：

jquery分页插件AmSetPager(自写)3