Paging is essential to almost every external program. In the webform era, many people have used the AspNetPager user control, many people actually use it because its advantages 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: passing a few parameters can generate a decent page. In fact, this is also a fatal drawback 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:
The Code is as follows:
Display
@ Html. DropDownList ("numPerPage", ViewBag. dNumPerPage as SelectList, new {onchange = "PageBreak ({numPerPage: this. value })"})
@ Model. TotalCount
Pagenumshown = "@ Model. PageNumShown" currentpage = "@ Model. CurrentPage">
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 attribute of class = "pagination" p: Total number of pages TotalCount, number of numperpages per page, displayed Number of 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:
The 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:
The 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 :'
# PageNum #'
};
Return this. each (function (){
Var $ this = $ (this );
Var pc = new Pagination (opts );
Var interval = pc. getInterval ();
Var pageNumFrag = '';
For (var I = interval. start; 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:
The Code is as follows:
<_ AJAX _>
<_ PAGE _ id = "pagination"> <BR><ul> <BR><li class="j-first"> <BR>首页 <BR>首页 <BR></li> <BR><li class="j-prev"> <BR>上一页 <BR>上一页 <BR></li> <BR>#pageNumFrag# <BR><li class="j-next"> <BR>下一页 <BR>下一页 <BR></li> <BR><li class="j-last"> <BR>末页 <BR>末页 <BR></li> <BR><li class="jumpto"><input class="jumptotext" type="text" value="#currentPage#" /><input class="goto" type="button" value="确定" /></li> <BR></ul> <BR>
Pagination.css:
The 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:
The Code is as follows:
$ (Function (){
$ ("P. 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 $ ("p. 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
The 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
Re-assign the value to the custom property of this DIV and call the pagination method. If you do not know whether the value is clearly written, you can go to dinner first. If you have any questions, leave a message. If you do not know that there are many users, I plan to write two usage methods in the future. One is to directly return this p for the returned data, the other is to return only the row data in the form and the four Custom Attributes of p, and then the js dynamically assigns values.
