Jquery paging plug-in AmSetPager (self-write)

I wrote the plug-in for the first time. Later I found a jquery plug-in template, and I took it. 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:

Copy codeThe 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) <SPAN style = "FONT-FAMILY: Arial, Helvetica, sans-serif">, when mode = default, this value must be set to 5 or more </SPAN>
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 "<a href = '" + href + "'>" + pageText + "</a> ";
}
Return "<a href = '" + href + "' I = '" + pageNo + "'>" + pageText + "</a> ";
},
// Select Element.
FormatStrIndex: function (pageNo ){
Return "<span class = '" + this. op. selectClass + "'>" + pageNo + "</span> ";
},
// 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; 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, '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 ):Copy codeThe Code is as follows: <SPAN style = "FONT-SIZE: 12px"> <style type = "text/css">
. 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>

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:Copy codeThe Code is as follows: <table id = "tablepager" border = "0" cellpadding = "0" cellspacing = "0">
<Tr> <td> <p> 1 aaaaaaaaaaaaaaaaaaaaaa </p> </td> </tr>
<Tr> <td> <p> 2 aaaaaaaaaaaaaaaaaaaaaa </p> </td> </tr>
<Tr> <td> <p> 3 aaaaaaaaaaaaaaaaaaaaaa </p> </td> </tr>
<Tr> <td> <p> 4 aaaaaaaaaaaaaaaaaaaaaa </p> </td> </tr>
<Tr> <td> <p> 5 aaaaaaaaaaaaaaaaaaaaaa </p> </td> </tr>
<Tr> <td> <p> 6 aaaaaaaaaaaaaaaaaaaaaa </p> </td> </tr>
<Tr> <td> <p> 7 aaaaaaaaaaaaaaaaaaaaaa </p> </td> </tr>
<Tr> <td> <p> 8 aaaaaaaaaaaaaaaaaaaaaa </p> </td> </tr>
<Tr> <td> <p> 9 aaaaaaaaaaaaaaaaaaaaaa </p> </td> </tr>
</Table>
<Div id = "pager" class = "pager"> </div>

Js Code:Copy codeThe 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:

Copy codeThe Code is as follows: <table id = "tablepager" border = "0" cellpadding = "0" cellspacing = "0">
</Table>
<Div id = "pager" class = "pager"> </div>

Backend instance data retrieval:Copy codeThe 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 <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 Code:Copy codeThe Code is as follows: <script type = "text/javascript">
$ (Function (){
$ ("# Tablepager "). amSetPager ({"viewCount": 3, "mode": "ajax", "dataCount": 30, "listCount": 6, "callback": function (ev, indexnum, viewCount) {// the three parameters of callback are: Data container object. The current page displays several data entries.

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

:

Url:
There is nothing to say, js Code:

Copy codeThe Code is as follows: $ (function (){
$ ("# Tablepager "). amPager ({"viewCount": 5, "dataCount": 50, "mode": "url", "listCount": 6, "urlparameter ": "ss = 1 & ee = 2 "});
})

Urlparameter is the passed parameter. You must also set the display per page and the total number of data entries. Click Page 3. The url address bar is test.htm? Ss = 1 & ee = 2 & p = 3
Plug-in writing may be a little bloated, and it is unreasonable in many places. I hope you can download and try it and give your comments so that a cainiao can grow. Thank you.