Pagination is an indispensable thing for almost every external program. In the era of webform, many people have used the user control AspNetPager. The number of people used it is actually its advantage: it can generate decent pagination by passing it a few parameters. In fact, this is also a fatal disadvantage of most programmers (including me): style... For us, it takes a lot of time to try to use CSS to adjust a module to look beautiful and beautiful. -!
Now more and more web-made people are beginning to adopt the .NET MVC framework. Putting aside all server controls, returning to authentic B/S programming, and enjoying the benefits of flexible control, it also takes a lot of effort. Many places have to be implemented by themselves, such as paging. Simple implementation of functions is definitely very simple, but it is not a very simple thing to be easy to use, general, have good performance, and are easy to modify. Therefore, various JS paging controls show their skills, such as jquery pager, jquery Pagination, etc., which are very convenient to call and have good generation effect. The only disadvantage is that they are all memory paging, and it is better to have a small amount of data, but if there are thousands, millions and tens of millions of data, it will be fatal. How great would it be if there was a front-end control that was convenient to call and cooperated with server-side paging:)
After saying so much, let’s take a look at a JS paging control I used to separate and transform it from a rich client UI framework (DWZ). Let’s take a look at the renderings first:
Page code:
<div class="panelBar">
<div class="pages">
<span>Show</span>
@("numPerPage", as SelectList, new { onchange = "PageBreak({numPerPage:})" })
<span>ites, a total of @ites</span>
</div>
<div class="pagination" totalcount="@" numperpage="@"
pagenumshown="@" currentpage="@">
</div>
In fact, this can be written as an HtmlHelper call, for example (,,,)
In this way, a statement is OK.
The principle is to use js to obtain the custom attributes of the div of class="pagination": Total number of pages, how many NumPerPage per page, how many pages are displayed PageNumShown, CurrentPage,
Then pass these four attributes to paging js, use these key attributes to calculate in paging js, and then replace the prefabricated paging template to show the paging effect.
In order to allow artists to adjust the paging according to the overall style of the project and realize the principle of good division of labor and cooperation, the paging js and CSS and paging replacement templates here are completely separated, so that the program will not be dizzy when looking at CSS or the artists will be dizzy when looking at JS.
Paging js is divided into two parts. Some are only responsible for calculating paging () based on parameters, and some are used to make previous preparations (). Some parameters are prefabricated. In fact, there is only one of them that is the position parameters of the paging template, and some custom extension functions used inside the paging. For the sake of art, the paging template is not mixed in js, but is easy to use by js. Here, XML format () is used, and the code is posted first.
：
(function($){
$.extend(, {
isPositiveInteger:function(){
return (new RegExp(/^[1-9]\d*$/).test(this));
},
replaceAll:function(os, ns) {
return (new RegExp(os,"gm"),ns);
}
});
$.({
hoverClass: function(className){
var _className = className || "hover";
return (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: " + + " " + );
},
success: function (xml) {
["pagination"]= $(xml).find("#pagination").text();
}
});
}
};
：
(function($){
$. = function(opts){
var setting = {
first$:"-first", prev$:"-prev", next$:"-next", last$:"-last", nums$:"-num>a", jumpto$:"",
pageNumFrag:'<li class="#liClass#"><a href="#">#pageNum#</a></li>'
};
return (function(){
var $this = $(this);
var pc = new Pagination(opts);
var interval = ();
var pageNumFrag = '';
for (var i=; i<;i++){
pageNumFrag += ("#pageNum#", i).replaceAll("#liClass#", i==() ? 'selected j-num' : 'j-num');
}
$(["pagination"].replaceAll("#pageNumFrag#", pageNumFrag).replaceAll("#currentPage#", ())).find("li").hoverClass();
var $first = $($);
var $prev = $($);
var $next = $($);
var $last = $($);
if (()){
$($prev).find(">span").hide();
_bindEvent($prev, ()-1, ());
_bindEvent($first, 1, ());
} else {
$($prev).addClass("disabled").find(">a").hide();
}
if (()) {
$($last).find(">span").hide();
_bindEvent($next, ()+1, ());
_bindEvent($last, (), ());
} else {
$($last).addClass("disabled").find(">a").hide();
}
$($).each(function(i){
_bindEvent($(this), i+, ());
});
$($).each(function(){
var $this = $(this);
var $inputBox = $(":text");
var $button = $(":button");
$(function(event){
var pageNum = $();
if (pageNum && ()) {
PageBreak({ pageNum: pageNum });
}
});
$(function(event){
if ( == 13) $();
});
});
});
function _bindEvent(jTarget, pageNum, targetType){
("click", {pageNum:pageNum}, function(event){
PageBreak({ pageNum: });
();
});
}
}
var Pagination = function(opts) {
= $.extend({
targetType:"navTab", // navTab, dialog
totalCount:0,
numPerPage:10,
pageNumShown:10,
currentPage:1,
callback:function(){return false;}
}, opts);
}
$.extend(, {
targetType:function(){return },
numPages:function() {
return (/);
},
getInterval:function(){
var ne_half = (/2);
var np = ();
var upper_limit = np - ;
var start = () > ne_half ? ( (() - ne_half, upper_limit), 0 ) : 0;
var end = () > ne_half ? (()+ne_half, np) : (, np);
return {start:start+1, end:end+1};
},
getCurrentPage:function(){
var currentPage = parseInt();
if (isNaN(currentPage)) return 1;
return currentPage;
},
hasPrev:function(){
return () > 1;
},
hasNext:function(){
return () < ();
}
});
})(jQuery);
Pagination template:
<?xml version="1.0" encoding="utf-8"?>
<_AJAX_>
<!-- pagination -->
<_PAGE_ ><![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>Previous page</span></a>
<span class="previous"><span>Previous page</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>Last Page</span></a>
<span class="last"><span>Last page</span></span>
</li>
<li class="jumpto"><input class="jumptotext" type="text" value="#currentPage#" /><input class="goto" type="button" value="OK" /></li>
</ul>
]]></_PAGE_>
</_AJAX_>
：
@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 { padding:0 0 0 5px;}
.pagination a, .pagination a, .pagination li span { float:left; display:block; padding:0 5px 0 0; text-decoration:none; line-height:23px; background-position:100% -150px;}
.pagination a{color:red; font-weight:bold;}
.pagination span, .pagination 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_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 { background:none;}
.pagination span, .grid .pagination a { background-position:0 100px; cursor:default;}
.pagination span span { color:#666;}
.pagination .first span { background:url(images/pagination/pagination_first_span.gif) left 5px no-repeat;}
.pagination .previous span { background:url(images/pagination/pagination_previous_span.gif) left 5px no-repeat;}
.pagination .next span { background:url(images/pagination/pagination_next_span.gif) right 5px no-repeat;}
.pagination .last span { background:url(images/pagination/pagination_last_span.gif) right 5px no-repeat;}
.pagination .last { margin-right:5px;}
.pagination { padding:2px 2px 0 7px; background-position:0 -200px;}
.pagination .jumptotext { float:left; width:30px; height:15px; padding:1px; border-color:#acaeaf; background:#ffffff; border:1px solid #9999cc;}
.pagination .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 also had a headache when I saw CSS. I wrote this with a friend and I changed it myself.
Next, let’s talk about how to use it:
First, specify the path to your own pagination template ("js/"); and then call pagination:
$(function(){
$("").each(function () {
var $this = $(this);
$({
totalCount: $("totalCount"),
numPerPage: $("numPerPage"),
pageNumShown: $("pageNumShown"),
currentPage: $("currentPage")
});
});
});
Why use each here? Why not directly $("").pagination({})? You should have thought that there are quite a few times when users like to put paging pages on the top and bottom of the list for easy operation. These two pieces of js can actually put a single file, and you need to use paging file references, because the program really uses data that the web and server exchange is concerned about, totalCount numPerPage pageNumShown currentPage. Everything I did before was just to implement a useful and general framework. Now everything that does not need to be changed is done. How to achieve interaction? It is very simple: when clicking on the page number or selecting the drop-down box for each page or clicking the go button, a custom function PageBreak will be triggered. This function is what you want to implement in detail, for example,
function PageBreak(args) {
alert(args["pageNum"]||args["numPerPage"]);
}
Here you can use js to obtain the current totalCount numPerPage pageNumShown current, and submit it to the backend page with the value of the filtered form on the page together with ajax, then receive the returned data, load it to the specified location, and pay attention to reassign the custom attribute of the DIV and then call the pagination method. I don’t know if it is written clearly, so I’ll go to have a meal first. If you have any questions, you can leave a message. If you are not sure, there are many people using it, you plan to write two usages in the future. One is to return the data and directly return the div, and the other is to only return the row data and 4 custom attributes of the div in the form, and then dynamically assign the value of the js.
Now more and more web-made people are beginning to adopt the .NET MVC framework. Putting aside all server controls, returning to authentic B/S programming, and enjoying the benefits of flexible control, it also takes a lot of effort. Many places have to be implemented by themselves, such as paging. Simple implementation of functions is definitely very simple, but it is not a very simple thing to be easy to use, general, have good performance, and are easy to modify. Therefore, various JS paging controls show their skills, such as jquery pager, jquery Pagination, etc., which are very convenient to call and have good generation effect. The only disadvantage is that they are all memory paging, and it is better to have a small amount of data, but if there are thousands, millions and tens of millions of data, it will be fatal. How great would it be if there was a front-end control that was convenient to call and cooperated with server-side paging:)
After saying so much, let’s take a look at a JS paging control I used to separate and transform it from a rich client UI framework (DWZ). Let’s take a look at the renderings first:
Page code:
Copy the codeThe code is as follows:
<div class="panelBar">
<div class="pages">
<span>Show</span>
@("numPerPage", as SelectList, new { onchange = "PageBreak({numPerPage:})" })
<span>ites, a total of @ites</span>
</div>
<div class="pagination" totalcount="@" numperpage="@"
pagenumshown="@" currentpage="@">
</div>
In fact, this can be written as an HtmlHelper call, for example (,,,)
In this way, a statement is OK.
The principle is to use js to obtain the custom attributes of the div of class="pagination": Total number of pages, how many NumPerPage per page, how many pages are displayed PageNumShown, CurrentPage,
Then pass these four attributes to paging js, use these key attributes to calculate in paging js, and then replace the prefabricated paging template to show the paging effect.
In order to allow artists to adjust the paging according to the overall style of the project and realize the principle of good division of labor and cooperation, the paging js and CSS and paging replacement templates here are completely separated, so that the program will not be dizzy when looking at CSS or the artists will be dizzy when looking at JS.
Paging js is divided into two parts. Some are only responsible for calculating paging () based on parameters, and some are used to make previous preparations (). Some parameters are prefabricated. In fact, there is only one of them that is the position parameters of the paging template, and some custom extension functions used inside the paging. For the sake of art, the paging template is not mixed in js, but is easy to use by js. Here, XML format () is used, and the code is posted first.
：
Copy the codeThe code is as follows:
(function($){
$.extend(, {
isPositiveInteger:function(){
return (new RegExp(/^[1-9]\d*$/).test(this));
},
replaceAll:function(os, ns) {
return (new RegExp(os,"gm"),ns);
}
});
$.({
hoverClass: function(className){
var _className = className || "hover";
return (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: " + + " " + );
},
success: function (xml) {
["pagination"]= $(xml).find("#pagination").text();
}
});
}
};
：
Copy the codeThe code is as follows:
(function($){
$. = function(opts){
var setting = {
first$:"-first", prev$:"-prev", next$:"-next", last$:"-last", nums$:"-num>a", jumpto$:"",
pageNumFrag:'<li class="#liClass#"><a href="#">#pageNum#</a></li>'
};
return (function(){
var $this = $(this);
var pc = new Pagination(opts);
var interval = ();
var pageNumFrag = '';
for (var i=; i<;i++){
pageNumFrag += ("#pageNum#", i).replaceAll("#liClass#", i==() ? 'selected j-num' : 'j-num');
}
$(["pagination"].replaceAll("#pageNumFrag#", pageNumFrag).replaceAll("#currentPage#", ())).find("li").hoverClass();
var $first = $($);
var $prev = $($);
var $next = $($);
var $last = $($);
if (()){
$($prev).find(">span").hide();
_bindEvent($prev, ()-1, ());
_bindEvent($first, 1, ());
} else {
$($prev).addClass("disabled").find(">a").hide();
}
if (()) {
$($last).find(">span").hide();
_bindEvent($next, ()+1, ());
_bindEvent($last, (), ());
} else {
$($last).addClass("disabled").find(">a").hide();
}
$($).each(function(i){
_bindEvent($(this), i+, ());
});
$($).each(function(){
var $this = $(this);
var $inputBox = $(":text");
var $button = $(":button");
$(function(event){
var pageNum = $();
if (pageNum && ()) {
PageBreak({ pageNum: pageNum });
}
});
$(function(event){
if ( == 13) $();
});
});
});
function _bindEvent(jTarget, pageNum, targetType){
("click", {pageNum:pageNum}, function(event){
PageBreak({ pageNum: });
();
});
}
}
var Pagination = function(opts) {
= $.extend({
targetType:"navTab", // navTab, dialog
totalCount:0,
numPerPage:10,
pageNumShown:10,
currentPage:1,
callback:function(){return false;}
}, opts);
}
$.extend(, {
targetType:function(){return },
numPages:function() {
return (/);
},
getInterval:function(){
var ne_half = (/2);
var np = ();
var upper_limit = np - ;
var start = () > ne_half ? ( (() - ne_half, upper_limit), 0 ) : 0;
var end = () > ne_half ? (()+ne_half, np) : (, np);
return {start:start+1, end:end+1};
},
getCurrentPage:function(){
var currentPage = parseInt();
if (isNaN(currentPage)) return 1;
return currentPage;
},
hasPrev:function(){
return () > 1;
},
hasNext:function(){
return () < ();
}
});
})(jQuery);
Pagination template:
Copy the codeThe code is as follows:
<?xml version="1.0" encoding="utf-8"?>
<_AJAX_>
<!-- pagination -->
<_PAGE_ ><![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>Previous page</span></a>
<span class="previous"><span>Previous page</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>Last Page</span></a>
<span class="last"><span>Last page</span></span>
</li>
<li class="jumpto"><input class="jumptotext" type="text" value="#currentPage#" /><input class="goto" type="button" value="OK" /></li>
</ul>
]]></_PAGE_>
</_AJAX_>
：
Copy the 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 { padding:0 0 0 5px;}
.pagination a, .pagination a, .pagination li span { float:left; display:block; padding:0 5px 0 0; text-decoration:none; line-height:23px; background-position:100% -150px;}
.pagination a{color:red; font-weight:bold;}
.pagination span, .pagination 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_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 { background:none;}
.pagination span, .grid .pagination a { background-position:0 100px; cursor:default;}
.pagination span span { color:#666;}
.pagination .first span { background:url(images/pagination/pagination_first_span.gif) left 5px no-repeat;}
.pagination .previous span { background:url(images/pagination/pagination_previous_span.gif) left 5px no-repeat;}
.pagination .next span { background:url(images/pagination/pagination_next_span.gif) right 5px no-repeat;}
.pagination .last span { background:url(images/pagination/pagination_last_span.gif) right 5px no-repeat;}
.pagination .last { margin-right:5px;}
.pagination { padding:2px 2px 0 7px; background-position:0 -200px;}
.pagination .jumptotext { float:left; width:30px; height:15px; padding:1px; border-color:#acaeaf; background:#ffffff; border:1px solid #9999cc;}
.pagination .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 also had a headache when I saw CSS. I wrote this with a friend and I changed it myself.
Next, let’s talk about how to use it:
First, specify the path to your own pagination template ("js/"); and then call pagination:
Copy the codeThe code is as follows:
$(function(){
$("").each(function () {
var $this = $(this);
$({
totalCount: $("totalCount"),
numPerPage: $("numPerPage"),
pageNumShown: $("pageNumShown"),
currentPage: $("currentPage")
});
});
});
Why use each here? Why not directly $("").pagination({})? You should have thought that there are quite a few times when users like to put paging pages on the top and bottom of the list for easy operation. These two pieces of js can actually put a single file, and you need to use paging file references, because the program really uses data that the web and server exchange is concerned about, totalCount numPerPage pageNumShown currentPage. Everything I did before was just to implement a useful and general framework. Now everything that does not need to be changed is done. How to achieve interaction? It is very simple: when clicking on the page number or selecting the drop-down box for each page or clicking the go button, a custom function PageBreak will be triggered. This function is what you want to implement in detail, for example,
Copy the 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 current, and submit it to the backend page with the value of the filtered form on the page together with ajax, then receive the returned data, load it to the specified location, and pay attention to reassign the custom attribute of the DIV and then call the pagination method. I don’t know if it is written clearly, so I’ll go to have a meal first. If you have any questions, you can leave a message. If you are not sure, there are many people using it, you plan to write two usages in the future. One is to return the data and directly return the div, and the other is to only return the row data and 4 custom attributes of the div in the form, and then dynamically assign the value of the js.