Jquery paging plug-in AmSetPager (self-written) _ jquery

The plug-in I used for the first time seems to be somewhat different. It is called to display the elements of the container $ (# DataContent ). amSetPager ({...}); configure the paging container element ID in the parameter. After writing the plug-in, it can be seen that all other plug-ins call the plug-ins made for the first time by calling the paging element ID. After writing the plug-ins, I found a jquery plug-in template and then took the plug-in. The name is jquery. boilerplate. js. I do not have a deep understanding of efficiency issues, and I do not quite understand efficiency issues.

I was originally developed for asp.net, but many people in the company, including artists, are not very good at js. A lot of js changes in the project make me a big start. The idea of writing plug-ins emerged, so I wrote the plug-ins in a different way. I also learned js object-oriented programming. We have a better understanding of js and some efficiency issues. Previously, a single page of a project had written over 600 lines of js files. All are process-oriented by function. Let's look back. Let's talk about the plug-in first.

The plug-in is called AmSetPager. First, let's take a look:

Download here: Click to download
This plug-in seems to be somewhat different. It is called to display the elements of the container $ ("# DataContent "). amSetPager ({...}); configure the paging container element ID in the parameter. After writing the plug-in, other plug-ins call the paging element ID.

Paste the source code:

The Code is as follows:

(Function ($, window, document, undefined ){
// Create the defaults once
Var pluginName = "AmSetPager ",
Defaults = {
PagerName: "pager", // pagination container
ViewCount: 5, // how many pieces of data can be displayed
DataCount: 0, // The total number of data retrieved from the backend (static)
SelectClass: "selectno", // selected Style

ListCount: 10, // how many page numbers are displayed (excluding the previous and next pages), Mode = default, this value must be set to 5 or above
EnablePrevNext: true, // allow displaying the last page of the previous page
EnableFirst: true, // allow only one page to display the page number
Template: "default", // template (currently only default)

Mode: "static", // "url" or "ajax"
Urlparameter: "", // url parameter, followed by aa = 1 & bb = 2...
Callback: null // callback function (ajax can also be used for retrieving data or static data)
};

// 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
// Obtain 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;
}
// Display static template data
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) + ")" detail .css ("display", "none ");
$ Content. children (": gt (" + (maxnum-1) + ")" detail .css ("display", "none ");
}

// Main
// Create the SetPager class
Var SetPager = function (options, pageCount ){
This. op = options;
This. pageCount = pageCount;
}
SetPager. prototype = {
// Format it to 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 + "";
},
// Select Element.
FormatStrIndex: function (pageNo ){
Return "" + pageNo + "";
},
// The default template initializes the page number set.
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 ){
$ ("#" Export 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 a 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, 'next page '));
}
// $ ("#" + This. op. pagerName). append (finalarr );
}
}

Plugin. prototype = {
// Initialization
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 Event
If(e.tar get. tagName! = 'A') return;
Var $ this = alias (e.tar get );
$ This. removeAttr ("href"). siblings (). attr ("href", "javascript: void (0 );");//..
Var indexnum = parseint(%this.html(%%%%%%%%this.html ()? Parseint(incluthis.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 );

Style (. pager is the paging element class ):

The Code is as follows:

There are three methods: one is that the data container on the page has all the data, and the mode is 'static '. In addition, when ajax retrieves data by page, the mode: 'ajax ', and the parameter paging mode: 'url' Based on the url (I don't think it will be used at this time ).

First, static:

Html:

The Code is as follows:

1 aaaaaaaaaaaaaaaaaaaaaaaa

2 aaaaaaaaaaaaaaaaaaaaaaaa

3 aaaaaaaaaaaaaaaaaaaaaaaa

4 aaaaaaaaaaaaaaaaaaaaaa

5 aaaaaaaaaaaaaaaaaaaaaa

6 aaaaaaaaaaaaaaaaaaaaaaaa

7 aaaaaaaaaaaaaaaaaaaaaaaa

8 aaaaaaaaaaaaaaaaaaaaaaaa

9 aaaaaaaaaaaaaaaaaaaaaa

Js Code:

The Code is as follows:

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

You can also set callback here, which is similar to the following

:

Ajax:

Html:

The Code is as follows:

Backend instance data retrieval:

The Code is as follows:

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

The Code is as follows: