Pagination is almost every external program indispensable things, in the WebForm era many people have used aspnetpager this user control it, the use of many people in fact, it is the advantages: to give it a few parameters can generate a decent paging, in fact this is also the vast majority of programmers (including me) The fatal flaw: The style ..., I for us to try to use CSS to make a module to look good and beautiful time spent far more than the time required to implement the function-!
Now more and more do the beginning of the web using the. NET MVC framework, put aside all server controls, return to authentic B/s programming, enjoy the benefits of flexible control, but also to spend a lot of time, many places have to do their own, such as paging such things. Simple to realize the function is certainly very simple, but to do good, general, performance, easy to modify is not a very simple thing, so a variety of JS paging control, such as jquery pager, jquery pagination and so on, the call is very convenient, the result is very good, The only drawback is that it is all memory paging, the amount of data less good, if tens of thousands of millions of hundreds of of data can be deadly. How good would it be to have a front-end control that can be easily invoked to work with service-side pagination:
So much for the rest of my life. I use a rich client UI Framework (DWZ) to separate the transformation of a JS paging control, first look at the effect map:
Page code:
Copy Code code as follows:
<div class= "Panelbar" >
<div class= "Pages" >
<span> Show </span>
@Html. DropDownList ("Numperpage", Viewbag.dnumperpage as SelectList, new {onchange = "PageBreak" ({NumPerPage:this.value })" })
<span>, a total of @Model. TotalCount Strip </span>
</div>
<div class= "pagination" totalcount= "@Model. TotalCount" numperpage= "@Model. Numperpage"
Pagenumshown= "@Model. Pagenumshown" currentpage= "@Model. CurrentPage" >
</div>
In fact this can be written as a htmlhelper call, such as Html.pagination (Viewbag.dnumperpage,model.totalcount,model.numperpage, Model.pagenumshown,model.currentpage)
This way, a single statement can be.
The principle is to use JS to get class= "pagination" div Custom attributes: Total page totalcount, how many numperpage per page, show how many page numbers Pagenumshown, the current number of pages currentpage,
The four attributes are then passed to the paging JS, which is used to calculate the key attributes in the page JS, and then the prefabricated pagination template is replaced to show the paging effect.
In order to let art according to the overall style of the project to adjust the page, to achieve a good division of the principle of division, where the page of JS and CSS and page replacement template is completely separate, not the program to see the CSS halo, art to see JS Halo.
Paging JS is divided into two parts, Part is only responsible for calculating the paging (Pagination.js) based on the parameters, part of the preparation for the previous (core.js), some of the parameters of prefabrication, in fact, there is only one is the location of the page template parameters, as well as a number of pages used within the custom extension function, pagination template for the purpose of editing to facilitate the observation, not mixed in JS Inside, but also easy to use JS, here in XML Format (pagination.xml), the first code posted out
Core.js:
Copy Code code 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 Code code 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 ');
}
$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.targettype ());
_bindevent ($first, 1, Pc.targettype ());
} else {
$first. Add ($prev). addclass ("Disabled"). Find (">a"). Hide ();
}
if (Pc.hasnext ()) {
$next. Add ($last). Find (">span"). Hide ();
_bindevent ($next, Pc.getcurrentpage () +1, Pc.targettype ());
_bindevent ($last, Pc.numpages (), Pc.targettype ());
} else {
$next. Add ($last). addclass ("Disabled"). Find (">a"). Hide ();
}
$this. Find (setting.nums$). Each (function (i) {
_bindevent ($ (this), I+interval.start, Pc.targettype ());
});
$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 =) $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.targetType},
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 Template pagination.xml:
Copy Code code 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> home </span></a>
<span class= "First" ><span> home </span></span>
</li>
<li class= "J-prev" >
<a class= "Previous" href= "#" ><span> prev </span></a>
<span class= "Previous" ><span> prev </span></span>
</li>
#pageNumFrag #
<li class= "J-next" >
<a class= "Next" href= "#" ><span> next page </span></a>
<span class= "Next" ><span> next page </span></span>
</li>
<li class= "J-last" >
<a class= "Last" href= "#" ><span> End </span></a>
<span class= "Last" ><span> end </span></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 Code code 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 A,. Pagination Li.hover A,. Pagination Li span {float:left; display:block; padding:0 5px 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. A-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. A/Background:url (images/pagination/pagination_first_a.gif) left 5px no-repeat;
. pagination Li. Previous span {Background:url (images/pagination/pagination_previous_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 span {color: #666;}
. Pagination li.disabled. Background:url (images/pagination/pagination_first_span.gif) left 5px no-repeat;
. Pagination Li.disabled. Previous span {Background:url (images/pagination/pagination_previous_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 see the CSS also has a headache, this is I find a friend wrote, I changed the
Now let's talk about how to use:
First specifies the path Dwz.init ("Js/pagination.xml") of the paging template; Then the paging is called:
Copy Code code 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 here with each, why not directly $ ("Div.pagination"). Pagination ({}), we should think of, there are many times users like in the list of the top and bottom of the page is easy to operate, the two JS can actually put a separate file, You need to use a paging file reference, because the program is really using the Web and server-side exchange of the data concerned, TotalCount numperpage Pagenumshown currentpage, all before doing is to implement a common framework. Now do not need to change things are done, how to implement the interaction, very simple: Click on the page number or select each page to display the Drop-down box or click the Go button will trigger a custom function PageBreak, this function within the people want to achieve what specific to write, for example
Copy Code code as follows:
function PageBreak (args) {
Alert (args["Pagenum"]| | args["Numperpage"]);
}
Here you can use JS to get the current totalcount numperpage Pagenumshown Curren, and the value of the filter form on the page with Ajax submitted to the back-end page, and then receive the returned data, loaded to the specified location, and note to the <div class= "Pagination" > The custom attributes of this div are then called pagination method can be, do not know to write clearly no, go to dinner, if there are questions can be left to leave a message, if not clear the specific use of more people, intend to follow up on two uses, One is to return the data directly back to this Div, one is to return only the form row data and Div 4 custom attributes, and then JS dynamically assigned
