Heim >Web-Frontend >js-Tutorial >jquery分页插件AmSetPager(自写)_jquery

jquery分页插件AmSetPager(自写)_jquery

WBOY
WBOYOriginal
2016-05-16 17:36:581039Durchsuche

第一次做的插件,早写好了,后来发现一个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
插件写的可能有点臃肿,很多地方也不合理。希望大家下载试试,提提意见,让一个菜鸟能成长,谢啦
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn