Transformation Method of Jquery paging plug-in (server-side paging)

Paging is almost essential to every external program. In the webform era, many people have used the AspNetPager user control. Many people actually use it because of its advantages: pass it a few parameters to generate a decent page. In fact, this is also the fatal disadvantage of most programmers (including me): style .., for us, it takes much more time to try to use CSS to make a module look nice --!
More and more web applications are being adopted. net mvc Framework, regardless of all server controls, returning to authentic B/S programming, and enjoying the benefits of flexible control, it also takes a lot of effort and has to be implemented by itself in many places, for example, paging. Simple implementation of functions is certainly very simple, but it is not very easy to use, General, good performance, and easy to modify, so a variety of JS paging controls, such as jquery pager, jquery Pagination, etc, the call is very convenient, and the generation effect is very good. The only drawback is that it is the memory paging, and the data volume is a little small. If it is tens of thousands of hundreds of millions of data, it will be terrible. How nice would it be to have a convenient call and a front-end control that can work with the server paging :)
After talking about this, let's take a look at a JS paging control that I separated and transformed from a rich client UI framework (DWZ). Let's take a look at it first:

Page code:

Copy codeThe Code is as follows:
<Div class = "panelBar">
<Div class = "pages">
<Span> display </span>
@ Html. DropDownList ("numPerPage", ViewBag. dNumPerPage as SelectList, new {onchange = "PageBreak ({numPerPage: this. value })"})
<Span> items, total @ Model. TotalCount </span>
</Div>
<Div class = "pagination" totalcount = "@ Model. TotalCount" numperpage = "@ Model. NumPerPage"
Pagenumshown = "@ Model. PageNumShown" currentpage = "@ Model. CurrentPage">
</Div>

In fact, this can be completely called as HtmlHelper, such as Html. Pagination (ViewBag. dNumPerPage, Model. TotalCount, Model. NumPerPage, Model. PageNumShown, Model. CurrentPage)
In this way, a statement can be used.
The principle is to use js to get the custom property of the div of class = "pagination": Total number of pages TotalCount, number of numperpages per page, number of displayed pages PageNumShown, current number of pages CurrentPage,
The four attributes are then passed to paging js. The paging js uses these key attributes for calculation and replaces the pre-made paging template to display the paging effect.
In order to enable the artist to adjust pages according to the overall style of the project and achieve a good principle of division of labor and cooperation, the js and CSS paging templates are completely separated here, the program will not see CSS dizzy, but the artist will see JS dizzy.
Paging js is divided into two parts. One part is only responsible for pagination based on parameters. js), part of which is for the previous preparations (core. js), some parameters are pre-fabricated. Here, only one is the location parameter of the paging template, and some custom extension functions are used inside the paging template to facilitate modification and observation, it is not mixed in js, but easy to use in js. Here we use the XML format (pagination. xml), first paste the code
Javascore. js:
Copy codeThe Code is as follows:
(Function ($ ){
$. Extend (String. prototype ,{
IsPositiveInteger: function (){
Return (new RegExp (/^ [1-9] \ d * $/). test (this ));
},
ReplaceAll: function (OS, ns ){
Return this. replace (new RegExp (OS, "gm"), ns );
}
});
$. Fn. extend ({
HoverClass: function (className ){
Var _ className = className | "hover ";
Return this. each (function (){
$ (This). hover (function (){
$ (This). addClass (_ className );
}, Function (){
$ (This). removeClass (_ className );
});
});
}
});
}) (JQuery );
Var DWZ = {
Frag :{},
Init: function (pageFrag ){
$. Ajax ({
Type: 'get ',
Url: pageFrag,
DataType: 'xml ',
Timeout: 50000,
Cache: false,
Error: function (xhr ){
Alert ('error loading XML document: '+ pageFrag + "\ nHttp status:" + xhr. status + "" + xhr. statusText );
},
Success: function (xml ){
DWZ. frag ["pagination"] = $ (xml). find ("# pagination"). text ();
}
});
}
};

Pagination. js:
Copy codeThe Code is as follows:
(Function ($ ){
$. Fn. pagination = function (opts ){
Var setting = {
First $: "li. j-first ", prev $:" li. j-prev ", next $:" li. j-next ", last $:" li. j-last ", nums $:" li. j-num> a ", jumpto $:" li. jumpto ",
PageNumFrag: '<li class = "# liClass #"> <a href = "#"> # pageNum # </a> </li>'
};
Return this. each (function (){
Var $ this = $ (this );
Var pc = new Pagination (opts );
Var interval = pc. getInterval ();
Var pageNumFrag = '';
For (var I = interval. start; I <interval. end; I ++ ){
PageNumFrag + = setting. pageNumFrag. replaceAll ("# pageNum #", I). replaceAll ("# liClass #", I = pc. getCurrentPage ()? 'Selected j-num': 'J-num ');
}
Export this.html (DWZ. frag ["pagination"]. replaceAll ("# pageNumFrag #", pageNumFrag ). replaceAll ("# currentPage #", pc. getCurrentPage ())). find ("li "). hoverClass ();
Var $ first = $ this. find (setting. first $ );
Var $ prev = $ this. find (setting. prev $ );
Var $ next = $ this. find (setting. next $ );
Var $ last = $ this. find (setting. last $ );
If (pc. hasPrev ()){
$ First. add ($ prev). find ("> span"). hide ();
_ BindEvent ($ prev, pc. getCurrentPage ()-1, pc.tar getType ());
_ BindEvent ($ first, 1, pc.tar getType ());
} Else {
$ First. add ($ prev). addClass ("disabled"). find ("> a"). hide ();
}
If (pc. hasNext ()){
$ Next. add ($ last). find ("> span"). hide ();
_ BindEvent ($ next, pc. getCurrentPage () + 1, pc.tar getType ());
_ BindEvent ($ last, pc. numPages (), pc.tar getType ());
} Else {
$ Next. add ($ last). addClass ("disabled"). find ("> a"). hide ();
}
$ This. find (setting. nums $). each (function (I ){
_ BindEvent ($ (this), I + interval. start, pc.tar getType ());
});
$ This. find (setting. jumpto $). each (function (){
Var $ this = $ (this );
Var $ inputBox = $ this. find (": text ");
Var $ button = $ this. find (": button ");
$ Button. click (function (event ){
Var pageNum = $ inputBox. val ();
If (pageNum & pageNum. isPositiveInteger ()){
PageBreak ({pageNum: pageNum });
}
});
$ InputBox. keyup (function (event ){
If (event. keyCode = 13) $ button. click ();
});
});
});
Function _ bindEvent (jTarget, pageNum, targetType ){
JTarget. bind ("click", {pageNum: pageNum}, function (event ){
PageBreak ({pageNum: event. data. pageNum });
Event. preventDefault ();
});
}
}
Var Pagination = function (opts ){
This. opts = $. extend ({
TargetType: "navTab", // navTab, dialog
TotalCount: 0,
NumPerPage: 10,
PageNumShown: 10,
CurrentPage: 1,
Callback: function () {return false ;}
}, Opts );
}
$. Extend (Pagination. prototype ,{
TargetType: function () {return this.opts.tar getType },
NumPages: function (){
Return Math. ceil (this. opts. totalCount/this. opts. numPerPage );
},
GetInterval: function (){
Var ne_half = Math. ceil (this. opts. pageNumShown/2 );
Var np = this. numPages ();
Var upper_limit = np-this. opts. pageNumShown;
Var start = this. getCurrentPage ()> ne_half? Math. max (Math. min (this. getCurrentPage ()-ne_half, upper_limit), 0): 0;
Var end = this. getCurrentPage ()> ne_half? Math. min (this. getCurrentPage () + ne_half, np): Math. min (this. opts. pageNumShown, np );
Return {start: start + 1, end: end + 1 };
},
GetCurrentPage: function (){
Var currentPage = parseInt (this. opts. currentPage );
If (isNaN (currentPage) return 1;
Return currentPage;
},
HasPrev: function (){
Return this. getCurrentPage ()> 1;
},
HasNext: function (){
Return this. getCurrentPage () <this. numPages ();
}
});
}) (JQuery );

Pagination. xml:
Copy codeThe Code is as follows:
<? Xml version = "1.0" encoding = "UTF-8"?>
<_ AJAX _>
<! -- Pagination -->
<_ PAGE _ id = "pagination"> <! [CDATA [
<Ul>
<Li class = "j-first">
<A class = "first" href = "#"> <span> homepage </span> </a>
<Span class = "first"> <span> homepage </span>
</Li>
<Li class = "j-prev">
<A class = "previous" href = "#"> <span> previous page </span> </a>
<Span class = "previous"> <span> previous page </span>
</Li>
# PageNumFrag #
<Li class = "j-next">
<A class = "next" href = "#"> <span> next page </span> </a>
<Span class = "next"> <span> next page </span>
</Li>
<Li class = "j-last">
<A class = "last" href = "#"> <span> last </span> </a>
<Span class = "last"> <span> last page </span>
</Li>
<Li class = "jumpto"> <input class = "jumptotext" type = "text" value = "# currentPage #"/> <input class = "goto" type = "button "value =" OK "/> </li>
</Ul>
]> </_ PAGE _>
</_ AJAX _>

Pagination.css:
Copy codeThe Code is as follows:
@ Charset "UTF-8 ";
/* CSS Document */
/* Public */
Ul li, ol li, dt, dd {list-style: none ;}
A: link {
Color: #000000;
Text-decoration: none;
}
A: visited {
Color: #000000;
Text-decoration: none;
}
A: hover {
Color: #000000;
Text-decoration: underline;
}
/* Pagination */
. PanelBar {
Margin-top: 12px;
Height: 26px;
Line-height: 26px;
}
. PanelBar ul {
Float: left;
}
. PanelBar ul li {
Float: left;
}
. Disabled {
Padding: 0 6px;
}
. J-num {
Padding: 0 4px;
}
. Pages
{
Margin-top: 12px;
Float: left;
}
. Pagination
{
Float: left;
Padding-left: 50px;
}
. Pagination li,. pagination li. hover {padding: 0 0 0 5px ;}
. Pagination ,. pagination li. hover ,. pagination li span {float: left; display: block; padding: 0 5px 0 0 0; text-decoration: none; line-height: 23px; background-position: 100%-150px ;}
. Pagination li. selected a {color: red; font-weight: bold ;}
. Pagination span,. pagination li. hover span {float: left; display: block; height: 23px; line-height: 23px; cursor: pointer ;}
. Pagination li. first span,. panelBar li. previous span {padding: 0 0 0 10px ;}
. Pagination li. next span,. panelBar li. last span {padding: 0 10px 0 0 ;}
. Pagination li. first span {background: url (images/pagination/pagination_first_a.gif) left 5px no-repeat ;}
. Pagination li. previous span {background: url (images/pagination/pagination_previus_a.gif) left 5px no-repeat ;}
. Pagination li. next span {background: url (images/pagination/pagination_next_a.gif) right 5px no-repeat ;}
. Pagination li. last span {background: url (images/pagination/pagination_last_a.gif) right 5px no-repeat ;}
. Pagination li. last {margin-right: 5px ;}
. Pagination li. disabled {background: none ;}
. Pagination li. disabled span,. grid. pagination li. disabled a {background-position: 0 100px; cursor: default ;}
. Pagination li. disabled span {color: #666 ;}
. Pagination li. disabled. first span {background: url (images/pagination/pagination_first_span.gif) left 5px no-repeat ;}
. Pagination li. disabled. previous span {background: url (images/pagination/pagination_previus_span.gif) left 5px no-repeat ;}
. Pagination li. disabled. next span {background: url (images/pagination/pagination_next_span.gif) right 5px no-repeat ;}
. Pagination li. disabled. last span {background: url (images/pagination/pagination_last_span.gif) right 5px no-repeat ;}
. Pagination li. disabled. last {margin-right: 5px ;}
. Pagination li. jumpto {padding: 2px 2px 0 7px; background-position: 0-200px ;}
. Pagination li. jumpto. jumptotext {float: left; width: 30px; height: 15px; padding: 1px; border-color: # acaeaf; background: # ffffff; border: 1px solid # 9999cc ;}
. Pagination li. jumpto. goto {float: left; display: block; overflow: hidden; width: 16px; height: 19px; border: 0; text-indent:-1000px; background: url (images/pagination/pagination_goto.gif) no-repeat; cursor: pointer ;}

I think CSS is also a headache. I wrote this by a friend and changed it myself.
Next, let's talk about the usage:
First, specify the path DWZ. init ("js/pagination. xml") of your paging template, and then call paging:
Copy codeThe Code is as follows:
$ (Function (){
$ ("Div. pagination"). each (function (){
Var $ this = $ (this );
$ This. pagination ({
TotalCount: $ this. attr ("totalCount "),
NumPerPage: $ this. attr ("numPerPage "),
PageNumShown: $ this. attr ("pageNumShown "),
CurrentPage: $ this. attr ("currentPage ")
});
});
});

Why is each used here? Why not directly $ ("div. pagination "). pagination ({}), you should have thought of it. Many times users prefer to put pages up and down the list to facilitate operations. In fact, these two JavaScript files can be put separately, you need to use the paging file reference, because the program actually uses the data that the web and server exchange cares about, totalCount numPerPage pageNumShown currentPage. All you have done before is to implement a useful general framework. Now, everything you don't need to change is done. How to Implement interaction is simple: clicking the page number, selecting the display drop-down box on each page, or clicking the go button triggers a custom function PageBreak, this function is specifically intended for writing, for example
Copy codeThe Code is as follows:
Function PageBreak (args ){
Alert (args ["pageNum"] | args ["numPerPage"]);
}

Here, you can use js to obtain the current totalCount numPerPage pageNumShown curren, submit it to the backend page together with the form value filtered on the page by ajax, then receive the returned data and load it to the specified location, and pay attention to <div class = "pagination"> assign a value to the custom attribute of this DIV, and then call the pagination method. If you do not know whether the value is correct, go to dinner first, if you have any questions, you can leave a message. If you do not know how many people are using it, you can write two methods later. One is to return data and directly return this div, one is to return only the row data in the form and the four custom attributes of the div, and then dynamically assign values to the js