jquery paging plug-in AmSetPager (self-written)_jquery

The first time I made a plug-in, I had already written it. Later I found a jquery plug-in template, so I took it and used it. The name is jquery.boilerplate.js. My understanding is not very deep, and I don’t understand many efficiency issues.

Originally, I was an asp.net developer, but many people in the company, including artists, were not very good at js. There were so many js changes in the project that it made my head spin. I came up with the idea of ​​writing a plug-in, so I followed the same pattern. In the process of writing the plug-in, I also learned the object-oriented nature of JS. I have a deeper understanding of js and some efficiency issues. There was a project in the past where I wrote more than 600 lines of js files for a single page. They are all written in a function-oriented and process-oriented manner. It’s too messy to look back on. Well, let’s talk about the plug-ins first.

The plug-in is called AmSetPager, let’s take a look at it first:

Download here: Click to download
My plug-in seems to be a bit different. It calls the element of the data display container $("#DataContent").AmSetPager({...}); Configure the paging container element ID in the parameters. After writing the plug-in, I saw that other plug-ins all call the paging element ID

Post the source code:

Copy the code The code is as follows:

(function ( $, window, document, undefined ) {
// Create the defaults once
var pluginName = "AmSetPager",
defaults = {
pagerName: "pager ", //Paging container
viewCount: 5, //How many pieces of data can be displayed
dataCount: 0, //If data is fetched in the background, how much is the total number (static ones are not used)
selectClass: "selectno" , //Selected style

listCount:10, //How many pagination numbers are displayed (excluding the previous page and next page), when mode=default, the value needs to be set to more than 5
enablePrevNext:true, //Allow the previous page and the next page to be displayed
enableFirst:true, //Allow only one page Display page number in the case of page
template:"default", //Template (currently only default)

mode:"static", //"url" or "ajax"
urlparameter:" ", //url parameters, followed by aa=1&bb=2...
callback:null //Callback function (ajax data or static can also be used)
};

// 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
//Get url parameters
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;
}
//Static template data display
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");
}

//Main
//Create the SetPager class
var SetPager = function (options,pageCount){
this.op = options;
this.pageCount = pageCount;
}
SetPager.prototype = {
//Format into a element
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 "";
},
//Selected state a element
FormatStrIndex : function(pageNo){
return "" pageNo "";
},
//Default template initialization Page number collection
InitDefaultList: function(_pageIndex){
if(this.op.listCount<5)
throw new Error("listCount must be lager than 5"); //listCount>5
var pageIndex = parseFloat(_pageIndex); //Convert to 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;
},
//Generate page number
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){ //Select 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,'previous page'));
}
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 <= viewCount; 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 is the passed parameter, and the display of each page and the total number of data must also be set. Click page number 3, the url address bar is: test.htm?ss=1&ee=2&p=3
The plug-in may be a bit bloated, and many places are unreasonable. I hope everyone can download it and give it a try, so that a newbie can grow, thank you