Home >Web Front-end >JS Tutorial >How to transform a Jquery paging plug-in (server-side paging)_jquery

How to transform a Jquery paging plug-in (server-side paging)_jquery

WBOYOriginal: 2016-05-16 18:04:551545browse

Pagination is an indispensable thing for almost every external program. In the webform era, many people have used the AspNetPager user control. The reason why so many people use it is actually its advantage: passing a few parameters to it can generate a decent Pagination, in fact, this is also the fatal shortcoming of most programmers (including me): style..., for us, the time spent trying to use CSS to make a module look good far exceeds the time required to implement the function. time- -!
Now more and more web developers are beginning to adopt the .NET MVC framework, putting aside all server controls and returning to authentic B/S programming. In addition to enjoying the benefits of flexible control, it also requires a lot of effort and many things have to be done by yourself. To implement things like paging. It is definitely very simple to implement the function simply, but it is not a simple matter to be easy to use, versatile, good in performance, and easy to modify. Therefore, various JS paging controls come into play, such as jquery pager, jquery Pagination, etc., which are very convenient to call. The generation effect is also very good. The only disadvantage is that it is all memory paging. It is better to have less data. If there are thousands, hundreds or tens of millions of data, it will be fatal. It would be great if there was a front-end control that is easy to call and can also cooperate with server-side paging:)
Having said so much, let me show you how to separate and transform it using a rich client UI framework (DWZ) A JS paging control comes out, take a look at the rendering first:

Page code:

Copy code The code is as follows:

Display
@Html.DropDownList("numPerPage", ViewBag.dNumPerPage as SelectList, new { onchange = "PageBreak({numPerPage:this.value})" })
items, total @Model.TotalCount items

pagenumshown="@Model.PageNumShown " currentpage="@Model.CurrentPage">

In fact, this can be written as an HtmlHelper call, such as Html.Pagination(ViewBag.dNumPerPage,Model.TotalCount,Model .NumPerPage,Model.PageNumShown,Model.CurrentPage)
In this way, one statement is enough.
The principle is to use js to get the custom attributes of the div with class="pagination": the total number of pages TotalCount, how many NumPerPage items per page, how many page numbers are displayed PageNumShown, and the current page number CurrentPage,
Then add these four The attributes are passed to the paging js. These key attributes are used in the paging js to perform calculations, and then the premade paging template is replaced to show the paging effect.
In order to allow the artist to adjust the paging according to the overall style of the project and achieve the principle of good division of labor and cooperation, the js and CSS of the paging here are completely separated from the paging replacement template, so that the program will not be confused when looking at the CSS, and the artist will look at the JS faint.
Pagination js is divided into two parts. One part is only responsible for calculating pagination based on parameters (pagination.js), and the other part is for preparatory work (core.js). Some parameters are prefabricated. In fact, there is only one here which is the paging template. Positional parameters, and some custom extension functions used inside paging. The paging template is for the convenience of modification and observation by artists, and is not mixed in js, but is also convenient for js to use. The XML format (pagination.xml) is used here. First, put the code Post it
core.js:

Copy code 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:

Copy code 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; ipageNumFrag = 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 == 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.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.xml：

复制代码代码如下:

<_AJAX_>

<_PAGE_ id="pagination">

首页
首页

末页
末页

]]>

pagination.css：

复制代码代码如下:

 
@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 .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 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 .first span { 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 also have a headache when reading CSS. I asked a friend to write this and changed it myself
Let’s talk about how to use it:
First specify the path of your own paging template DWZ.init("js/ pagination.xml"); Then call pagination:

Copy code The 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 use each here? Why not just $("div.pagination").pagination( {}), you should have thought of it. Many times, users like to put pagination above and below the list for ease of operation. In fact, these two pieces of js can be placed in a separate file. You only need to use the paging file reference, because the program really What is used is the data that the web and server are interested in exchanging, totalCount numPerPage pageNumShown currentPage. All that has been done before is to implement a common framework that is easy to use. Now that everything that does not need to be changed is done, how to implement interaction is very simple: when you click on the page number or choose to display the drop-down box on each page or click the go button, a custom function PageBreak will be triggered. Inside this function, you will know exactly what you want to achieve. Write, for example,

Copy code The code is as follows:

 
function PageBreak(args) { 
 alert(args["pageNum"]||args["numPerPage"]); 
} 

Here you can use js to get the current totalCount numPerPage pageNumShown curren, and filtered on the page The form value is submitted to the back-end page together with ajax, and then the returned data is received and loaded into the specified location. Pay attention to reassign the custom attribute of

and then call the pagination method. But, I don’t know if I wrote it clearly. I’m going to eat first. If you have any questions, you can leave a message. If you don’t know how many people use it, I plan to write two usages in the future. One is to return data directly to this div, and the other is to just return The 4 custom attributes of the row data and div in the form are then dynamically assigned by js

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Javascript text box textarea height shrinks adaptively with content_form special effectsNext article：Javascript text box textarea height shrinks adaptively with content_form special effects

See more

How to transform a Jquery paging plug-in (server-side paging)_jquery

Related articles