JQuery Paging Component Yunm.pager.js The idea of implementing Div local Refresh _jquery

The front page of a number of plug-ins, bootstrap page of the interface looks good, but also easy to start, but applied to the project in the page to realize there are several difficulties, respectively:

How to encapsulate a page-flipping plug-in, such as the Yunm.pager.js in the title.

Involve the Div local refresh how to do it.

Before you introduce the text, first show you the effect of the picture, if it feels good, please continue reading:

The overall process of paging involves a lot of knowledge, this article we also focus on the above two points, the rest of the content, please self-awareness.

How to define a partially refreshed div

When we flip the page, we usually only refresh the parent div that involves flipping pages, so how do we define it?

<form rel= "Support_deal_page" target= "Turnpageform" action= "${ctx}/initi" method= "POST" >
<input type= " Hidden "name=" page value= "1"/>
<input type= "hidden" name= "Rows" value= "2"/>
</form>
<div id= "Support_deal_page" class= "Row" ></div>

Define IDs for Div, it is recommended that the current page is unique if the page has more than one paging component.

Create one sibling form form for Div.

The Rel attribute points to the Div, indicating that the form form belongs to the Support_deal_page Div.

The target property is Turnpageform, indicating that the form is a form for the paging component.

The action parameter is naturally necessary.

Defines the input label for the page, indicating that it is the first page.

Define the input label for rows, indicating that there are two displays per page.

Div definition, when the page load load, we can request the background (backstage how to deal with data, here is not wordy), get the first page of the paging data.

According to the target attribute of the form, get the div that needs pagination, and initiate the AJAX request.
$ ("Form[target=turnpageform]", $p). Each (the function () {var $this = $ (this);
Yunm.debug (' form[target=turnpageform] ' + $this. selector);
var rel = $this. attr ("rel");
var $box = $this. Parent (). Find ("#" + rel); if (rel) {$box. ajaxurl {type: POST,//record div ID URL: $this. attr ("action") + "? rel=" + rel, Data: $this. Serializearr
Ay (), callback:function () {}});
}
}); Ajaxurl:function (OP) {var $this = $ (this); $.ajax ({type:op.type | | ' Get ', Url:op.url, Data:op.data, Cache:false, success:function (response) {var JSON = Yunm.jsoneval (response); if (Json[yunm.keys.statuscode] = = YUNM.statusCode.error) {if (Json[yunm.keys.message]) $.showerr (Json[yunm.keys.message]); else {//Ajax request succeeds, place the locally refreshed content in the div $this. HTML (response). Initui (); if ($.isfunction (Op.callback)) Op.callback (
Response); }, Error:YUNM.ajaxError, StatusCode: {503:function (XHR, ajaxoptions, Thrownerror) {$.showerr ("server is currently overloaded or maintaining!" | |
THROWNERROR);
}
}
}); },

When the page first loads, we put the first page of data into the DIV, this step is also very simple.

Second, the package page-turning component Yunm.pager.js

After you complete the first step, how to encapsulate the paging component becomes the next key step.

(function ($) {$.fn.extend ({pager:function (opts) {//can refer to the page of bootstrap to get the button component of the previous and last page var setting = {prev$: "Li.pre
Vious ", next$:" Li.next ",}; Return This.each (function () {var $this = $ (this); var pc = new Pager (opts);//reference bootstrap page $this. html (' <ul class= ' PA Ger "> ' + ' <li class=" previous "><a href=" # ">← previous page </a></li> ' + ' <li class= ' next ' ><a
href= "#" > After →</a></li> ' + ' </ul> ');
var $prev = $this. Find (setting.prev$);
var $next = $this. Find (setting.next$); if (Pc.hasprev ()) {//If there is a previous page, bind the previous page event _bindevent ($prev, Pc.getcurrentpage ()-1, Pc.rel ());} else {//otherwise gray $prev. Addclas
S ("Disabled");
} if (Pc.hasnext ()) {_bindevent ($next, Pc.getcurrentpage () + 1, Pc.rel ());} else {$next. addclass ("Disabled");}); Binding fixed-point event, mainly passing the first few page function _bindevent ($target, Pagenum, rel) {$target. bind ("click", {Pagenum:pagenum}, function (event ) {Yunmpagebreak ({rel:rel, data: {pageNum:event.data.pageNum}}); Event.preventdefaulT ();
});
}
},
});  necessary parameters for paging var Pager = function (opts) {this.opts = $.extend ({rel: "",//for local flush div ID number totalcount:0,//total numperpage:
10,//The default display of 10 currentpage:1,//current page callback:function () {return false;}}, OPTs);
}; $.extend (Pager.prototype, {rel:function () {return this.opts.rel;},//per page shows how many numpages:function () {return math.cei
L (this.opts.totalcount/this.opts.numperpage); },//Current page getcurrentpage:function () {var currentpage = parseint (this.opts.currentPage); if (isNaN (currentpage)) return
1;
return currentpage; },//Can page forward hasprev:function () {return this.getcurrentpage () > 1;},//page back hasnext:function () {return this.get
CurrentPage () < This.numpages ();
}
});
}) (JQuery);
function Yunmpagebreak (options) {var op = $.extend ({rel: "", Data: {pagenum: "",}, Callback:null}, Options); if (Op.rel) {var $box = $ ("#" + Op.rel);//After obtaining a locally refreshed div, you can obtain the form form var form = $ ("Form[target=turnpageform]" of the sibling, $box. par
ENT ()). get (0); if (form) {//page if(op.data.pageNum) Form[yunm.pageinfo.pagenum].value = Op.data.pageNum;  $box. Ajaxurl ({type: "POST", url: $ (Form). attr ("action") + "? rel=" + Op.rel, Data: $ (Form). Serializearray (), Callback:
function () {}}); }
}
}

Third, the page application

After encapsulating the paging component, let's look at how to use it.

<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "pageencoding=" Utf-8 "%>
<%@ include file="/components/common/taglib.jsp "%> <c
: ForEach items= "${deal_page}" var= "deal" >
${deal.name}
</c:forEach>
<div class= " Turnpagepager "rel=" ${param.rel} "totalcount=" ${vo.totalcount} "numperpage=" ${vo.numperpage} "
currentPage=" ${ Vo.pagenum} ">

Specifies that the div's class is turnpagepager, and we convert it to the pager component when the page is load.

Assigns its key attributes rel, TotalCount, Numperpage, CurrentPage.

When the page load is converted:

$ ("Div.turnpagepager", $p). each (function () {
var $this = $ (this);
$this. Pager ({
rel: $this. attr ("rel"),
totalcount: $this. attr ("TotalCount"),
numperpage: $this. attr ("Numperpage"),
currentpage: $this. attr ("CurrentPage")
});

The above is a small series of jquery page to introduce the component Yunm.pager.js realize Div local refresh ideas, hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!