jquery paging yunm.pager.js, involving Div partial refresh

There are a lot of flip-top page plug-ins, bootstrap the page interface looks good, do it easy to use, but the implementation of the page in the project also has a few difficulties, namely:

1. How to encapsulate a paging plugin, such as the Yunm.pager.js in the title.
2. Involves a partial refresh of the div to do.

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

First, how to define a locally refreshed div

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

<form rel= "support_deal_page"  target=< Span class= "hljs-string" > "Turnpageform" action= "${ctx}/initi"  method  = "post"  > <input < Span class= "Hljs-keyword" >type  =  "hidden"  name=  "page"  value  = "1" /> <input type  =   "hidden"  name= "Rows"  value  = "2" /></form><div Id= "support_deal_page"  class  =  "row"  ></div> 

1. Defines the ID for the Div, which is recommended for the current page only if the page has multiple paging components.
2. Create a form form with a sibling for the Div.
   
   • The Rel attribute points to the Div, which indicates that the form form belongs to the Support_deal_page Div.
   • The target property is Turnpageform, which indicates that the form is a form of the paging component.
   • The action parameter is naturally necessary.
   • Defines the input label for the page, which is indicated as the first page.
   • Defines the input label for rows, indicating that there are two displays per page.

After the DIV is defined, when the page loads the load, we can request the background (how to handle the data in the background, here is not wordy), get the paging data of the first page.

//Based on the target property of the form, get a div that needs paging and initiate an AJAX request. $("Form[target=turnpageform]", $p). each ( function() {    var$ This= $( This); Yunm.debug (' form[target=turnpageform] '+ $ This. selector);varrel = $ This. attr ("rel");var$box = $ This. Parent (). Find ("#"+ rel);if(rel) {$box. Ajaxurl ({type:"POST",//Record Div's IDURL: $ This. attr ("Action") +"? rel="+ rel, data: $ This. Serializearray (), Callback: function() {}        }); }}); Ajaxurl: function(OP) {    var$ This= $( This); $.ajax ({type:op.type | |' GET ', Url:op.url, Data:op.data, cache:false, Success: function(response) {            varJSON = Yunm.jsoneval (response);if(Json[yunm.keys.statuscode] = = YUNM.statusCode.error) {if(Json[yunm.keys.message]) $.showerr (Json[yunm.keys.message]); }Else{when the AJAX request succeeds, the locally refreshed content is placed in the Div$ This. HTML (response). Initui ();if($.isfunction (Op.callback)) Op.callback (response); }}, Error:YUNM.ajaxError, StatusCode: {503: function(XHR, Ajaxoptions, Thrownerror) {$.showerr ("The server is currently under heavy load or is being maintained!"||            THROWNERROR); }        }    });},

When the page first loads, we put the first page of data into the Div, which is also very simple.

Second, package paging module Yunm.pager.js

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

( function($) {$.fn.extend ({pager: function(opts) {            //can refer to Bootstrap's page, in order to get the button component of the previous and next page            varsetting = {prev$:"Li.previous", next$:"Li.next",            };return  This. each ( function() {                var$ This= $( This);varPC =NewPager (opts);//Refer to Bootstrap page$ This. HTML (' <ul class= ' pager ' > '+' <li class= ' previous ' ><a href= ' # ' >&larr; previous </a></li> '+' <li class= ' next ' ><a href= ' # ' > Next &rarr;</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. addclass ("Disabled"); }if(Pc.hasnext ()) {_bindevent ($next, pc.getcurrentpage () +1, Pc.rel ()); }Else{$next. addclass ("Disabled"); }            });//Bind a fixed-point click event, mainly pass the first few pages             function _bindevent($target, Pagenum, rel) {$target. Bind ("click", {pagenum:pagenum}, function(event) {Yunmpagebreak ({rel:rel, data: {Pagenum:eve                    Nt.data.pageNum}});                Event.preventdefault ();            }); }        },    });necessary parameters for paging    varPager = function(opts) {         This. opts = $.extend ({rel:"",//For partial refresh div ID numberTotalCount:0,//TotalNumperpage:Ten,//default display of 10CurrentPage:1,//Current pageCallback: function() {                return false;    }}, opts);    }; $.extend (Pager.prototype, {rel: function() {            return  This. Opts.rel; },//Per page number of displaysNumPages: function() {            return Math. Ceil ( This. Opts.totalcount/ This. opts.numperpage); },//Current pageGetcurrentpage: function() {            varCurrentPage =parseint( This. opts.currentpage);if(IsNaN(currentpage))return 1;returnCurrentPage; },//Can I page forward ?Hasprev: function() {            return  This. Getcurrentpage () >1; },//page backHasnext: function() {            return  This. Getcurrentpage () < This. NumPages (); }    });}) (JQuery);

 function yunmpagebreak(options) {    varOP = $.extend ({rel:"", data: {pagenum:"",}, Callback:NULL}, Options);if(Op.rel) {var$box = $ ("#"+ Op.rel);//Get a locally refreshed div to get the form form of a sibling        varForm = $ ("Form[target=turnpageform]", $box. Parent ()). Get (0);if(form) {//First 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 application of page flipping

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}&LT;/C: forEach><div class="Turnpagepager"Rel="${param.rel}"Totalcount="${vo.totalcount}"Numperpage="${vo.numperpage}"Currentpage="${vo.pagenum}">

1. Specifies that the div's class is turnpagepager, and we convert it to the pager component when the page is load.
2. The key properties of Rel, TotalCount, Numperpage, CurrentPage are assigned.

When the page is load, convert:

$("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")    });});

Four, the effect

jquery paging yunm.pager.js, involving Div partial refresh