The pagination of jquery is extended as required by the project. In this way, jquery. pagination may directly request the server with parameters Ajax and update the content of the corresponding container.
Record:
Address: http://blog.csdn.net/Vange/archive/2010/07/20/5748477.aspx
========================================================== ========
Usage:
Download the relevant jquery library and CSS.
Demo_vange.html
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml" XML: lang = "en"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <title> pagination demo I-simple pagination </title> <br/> <LINK rel =" stylesheet "href = ".. /pagination.css "mce_href =" pagination.css "/> <Br/> <LINK rel = "stylesheet" href = "demo.css" mce_href = "demo.css"/> <br/> <MCE: script Type = "text/JavaScript" src = "lib/jquery. min. JS "mce_src =" lib/jquery. min. JS "> </MCE: SCRIPT> <br/> <MCE: Script Type =" text/JavaScript "src = ".. /jquery. pagination. JS "mce_src =" jquery. pagination. JS "> </MCE: SCRIPT> </P> <p> <MCE: Script Type =" text/JavaScript "> <! -- </P> <p> // This is a very simple demo that shows how a range of elements can <br/> // be paginated. <br/> // the elements that will be displayed are in a hidden Div and are <br/> // cloned for display. the elements are static, there are no Ajax <br/> // callinvolved. </P> <p>/** <br/> * callback function that displays the content. <br/> * gets called every time the user clicks on a pagin Ation link. <br/> * @ Param {int} page_index new page index <br/> * @ Param {jquery} JQ the container with the pagination links as a jquery object <br/> */<br/> function pageselectcallback (page_index, JQ) {<br/> var new_content = jquery ('# hiddenresult Div. result: eq ('+ page_index + ')'). clone (); <br/> $ ('# searchresult '). empty (). append (new_content); <br/> return false; <br/>}</P> <p>/** <br/> * Initialisation function for pagination <br/> */<br/> function initpagination () {<br/> // count entries inside the hidden content <br/> // var num_entries = jquery ('# hiddenresult Div. result '). length; <br/> var num_entries = 100; <br/> // create content inside pagination element <br/> $ ("# pagination "). pagination (num_entries, {<br/> // callback: pageselectcallback, <br/> items_per_page: 1, // show o Nly one item per page <br/> URL: "snippet.html", <br/> Params: {"pagesize": 3, "condition1": "value1 "}, <br/> showresultcontainer: "searchresult" <br/>}); <br/>}</P> <p> // when document is ready, initialize pagination <br/> $ (document ). ready (function () {<br/> initpagination (); <br/>}); </P> <p> // --> </MCE: SCRIPT> <br/> </pead> <br/> <body> <br/> <p> jquery pagination plugin demo </p> <br/> <Div id = "Pa Gination "> </div> <br/> <br style =" clear: Both; "mce_style =" clear: both; "/> <br/> <Div id =" searchresult "> <br/> This content will be replaced when pagination inits. <br/> </div> </P> <p> <! -- Container element for all the elements that are to be paginated --> <br/> <Div id = "hiddenresult" style = "display: none;" mce_style = "display: none; "> <br/> <Div class =" result "> <p> globally maximize granular <br/>" outside the box "thinking vis-a-vis quality niches. proactively formulate 24/7 <br/> results whereas 2.0 forbidden STs for change. specified sionally implement 24/365 niches <br/> rather than client-focused users. </P> <br/> <p> <br/> competently engineer high-payoff "outside the box" thinking through cross <br/> functional benefits. proactively transition intermandated processes through <br/> open-source niches. progressively engage maintainable innovation and extensible <br/> interfaces. </P> <br/> </div> <br/> <Div class = "result"> <p> credibly fabricate e-business models for end-to-end niches. <br/> compellingly disseminate integrated e-markets without ubiquitous services. <br/> credibly create equity investors channels with multidisciplinary human capital. </P> <br/> <p> <br/> interactively integrate competitive users rather than fully tested <br/> infomediaries. seamlessly initiate premium functionalities rather than impactful <br/> ubuntures. rapidiously leverage existing resource-leveling processes via <br/> user-centric portals. </P> <br/> </div> <br/> <Div class = "result"> <p> monotonectally initiate unique <br/> E-Services vis- -vis client-centric deliverables. quickly impact parallel <br/> opportunities with B2B bandwidth. synergistically streamline client-focused <br/> infrastructures rather than B2C e-commerce. </P> <br/> <p> <br/> phosfluorescently fabricate 24/365 e-business through 24/365 total linkage. <br/> completely facilitate high-quality systems without stand-alone strategic theme <br/> areas. </P> <br/> </div> </P> <p> <Div id = "footer"> <br/> Copyright 2010 by <a href = "http://www.d-scribe.de/" mce_href = "http://www.d-scribe.de/"> describe Europe Ltd. </a>. <br/> </div> <br/> </body> <br/> </ptml> <br/>
========================================================== ========
Modified pagination of jquery: jquery. pagination. js
/** <Br/> * This jquery plugin displays pagination links inside the selected elements. <br/> * This plugin in needs at least jquery 1.4.2 <br/> * @ Author Gabriel Birke (Birke * at * D-scribe * dot * de) <br/> * @ version 2.0rc <br/> * @ Param {int} maxentries number of entries to paginate <br/> * @ Param {object} opts several options (see readme for documentation) <br/> * @ return {object} jqu Ery object <br/> */<br/> (function ($) {<br/>/** <br/> * @ Class class for calculating pagination values <br/> */<br/> $. paginationcalculator = function (maxentries, opts) {<br/> This. maxentries = maxentries; <br/> This. opts = opts; <br/>}</P> <p> $. extend ($. paginationcalculator. prototype, {<br/>/** <br/> * calculate the maximum number of pages <br/> * @ method <br/> * @ returns {number} <br/> */<br/> N Umpages: function () {<br/> return math. ceil (this. maxentries/This. opts. items_per_page); <br/>}, <br/>/** <br/> * calculate start and end point of pagination links depending on <br/> * current_page and num_display_entries. <br/> * @ returns {array} <br/> */<br/> getinterval: function (current_page) {<br/> var ne_half = math. ceil (this. opts. num_display_entries/2); <br/> var Np = This. numpages (); <br/> var u Pper_limit = NP-This. opts. num_display_entries; <br/> var start = current_page> ne_half? Math. Max (math. Min (current_page-ne_half, upper_limit), 0): 0; <br/> var end = current_page> ne_half? Math. min (current_page + ne_half, NP): math. min (this. opts. num_display_entries, NP); <br/> return {start: Start, end: End };< br/>}< br/> }); </P> <p> // initialize jquery object container for pagination renderers <br/> $. paginationrenderers ={}</P> <p>/** <br/> * @ Class default Renderer for rendering pagination Links <br/> */<br/> $. paginationrenderers. defaultrenderer = function (maxentries, opts) {<br/> This. ma Xentries = maxentries; <br/> This. opts = opts; <br/> This. PC = new $. paginationcalculator (maxentries, opts); <br/>}< br/> $. extend ($. paginationrenderers. defaultrenderer. prototype, {<br/>/** <br/> * helper function for generating a single link (or a span tag if it's the current page) <br/> * @ Param {number} page_id the page ID for the new item <br/> * @ Param {number} current_page <br/> * @ Param {obje CT} appendopts options for the new item: Text and classes <br/> * @ returns {jquery} jquery object containing the link <br/> */<br/> CreateLink: function (page_id, current_page, appendopts) {<br/> var lnk, NP = This. PC. numpages (); <br/> page_id = page_id <0? 0 :( page_id <NP? Page_id: np-1); // normalize page ID to sane value <br/> appendopts = $. extend ({text: page_id + 1, classes: ""}, appendopts ||{}); <br/> If (page_id = current_page) {<br/> lnk = $ ("<SPAN class = 'current'>" + appendopts. text + "</span> "); <br/>}< br/> else <br/> {<br/> lnk = $ ("<A>" + appendopts. text + "</a>") <br/>. ATTR ('href ', this. opts. link_to.replace (/_ id _/, page_id); <br/>}< br/> If (appendopts. classes) {L NK. addclass (appendopts. classes) ;}< br/> lnk. data ('page _ id', page_id); <br/> return lnk; <br/> }, <br/> // generate a range of numeric Links <br/> appendrange: function (container, current_page, start, end) {<br/> var I; <br/> for (I = start; I <end; I ++) {<br/> This. createLink (I, current_page ). appendto (container); <br/>}< br/>}, <br/> getlinks: function (current_page, eventhandler) {<br/> var begin, end, <br/> I Nterval = This. PC. getinterval (current_page), <br/> NP = This. PC. numpages (), <br/> fragment = $ ("<Div class = 'pagination'> </div> "); </P> <p> // generate "previous"-link <br/> If (this. opts. prev_text & (current_page> 0 | this. opts. prev_show_always) {<br/> fragment. append (this. createLink (current_page-1, current_page, {text: This. opts. prev_text, classes: "Prev"}); <br/>}< br/> // generate Starting Points <br /> If (interval. start> 0 & this. opts. num_edge_entries> 0) <br/>{< br/> end = math. min (this. opts. num_edge_entries, interval. start); <br/> This. appendrange (fragment, current_page, 0, end); <br/> If (this. opts. num_edge_entries <interval. start & this. opts. ellipse_text) <br/>{< br/> jquery ("<span>" + this. opts. ellipse_text + "</span> "). appendto (fragment); <br/>}< br/> // generate interval Links <br/> T His. appendrange (fragment, current_page, interval. start, interval. end); <br/> // generate ending points <br/> If (interval. end <NP & this. opts. num_edge_entries> 0) <br/>{< br/> If (np-this.opts.num_edge_entries> interval. end & this. opts. ellipse_text) <br/>{< br/> jquery ("<span>" + this. opts. ellipse_text + "</span> "). appendto (fragment); <br/>}< br/> begin = math. max (np-this.opts.num_edge_entries, interva L. end); <br/> This. appendrange (fragment, current_page, begin, NP); </P> <p >}< br/> // generate "Next"-link <br/> If (this. opts. next_text & (current_page <np-1 | this. opts. next_show_always) {<br/> fragment. append (this. createLink (current_page + 1, current_page, {text: This. opts. next_text, classes: "Next"}); <br/>}< br/>$ ('A', fragment ). click (eventhandler); <br/> return fragment; <br/>}< br/>}); </P> <p> // ex Tend jquery <br/> $. FN. pagination = function (maxentries, opts) {</P> <p> // initialize options with default values <br/> opts = jquery. extend ({<br/> items_per_page: 10, <br/> num_display_entries: 10, <br/> current_page: 0, <br/> num_edge_entries: 0, <br/> link_to: "javascript:;", <br/> prev_text: "Previous Page", <br/> next_text: "Next page", <br/> ellipse_text: "... ", <br/> prev_show_always: True, <br/> next_show_always: True, <br/> rend Erer: "defaultrenderer", <br/> callback: readremotepage, <br/> showremotepagecallback: showremotepagecallback, <br/> ID: "default_pagination", <br/> URL: "#", <br/> loading: "loading... ", <br/> Params :{}, <br/> showresultcontainer: NULL, <br/> showresultcallback: function (data) {return false ;}< br/> }, opts | |{}); </P> <p> var containers = This, <br/> Renderer, links, current_page; </P> <p> var tipid = "callbacktip _" + opts. I D; <br/> var tipdiv = '<Div id = "' + tipid + '" style = "color: red; font-size: 12px; position: absolute; background-color: # f8ef00; "mce_style =" color: red; font-size: 12px; position: absolute; Background-color: # f8ef00; "> '+ <br/> opts. loading + '</div>'; <br/> $ ("body "). append (tipdiv); <br/> $ (this ). ajaxstart (function () {<br/> If (OPTs. showresultcontainer! = NULL) {<br/> var tip = $ ("#" + tipid); <br/> var offset = $ ("#" + opts. showresultcontainer ). offset (); <br/> tip. offset (offset); <br/> tip. show (); <br/>}< br/>}); <br/> $ (this ). ajaxstop (function () {<br/> If (OPTs. showresultcontainer! = NULL) {<br/> var tip = $ ("#" + tipid); <br/> tip. hide (); <br/>}< br/> }); <br/>/** <br/> * default action to get remote page content <br/> */<br/> function readremotepage (current_page, containers) {<br/> var Params = jquery. extend (OPTs. params, {}); <br/> Params. pagenum = current_page + 1; <br/> $. get (OPTs. URL, Params, opts. showremotepagecallback); <br/> return false; <br/>}</P> <p>/** <br/> * callback Function to show remote page content <br/> */<br/> function showremotepagecallback (data) {<br/> If (OPTs. showresultcontainer! = NULL) {<br/> $ ("#" + opts.showresultcontainer).html (data); <br/>} else {<br/> opts. showresultcallback (data ); <br/>}</P> <p>/** <br/> * This is the event handling function for the pagination links. <br/> * @ Param {int} page_id the new page number <br/> */<br/> function pageselected (EVT) {<br/> var links, current_page = objects (evt.tar get ). data ('page _ id'); <br/> containers. data ('current _ page', current_p Age); <br/> links = Renderer. getlinks (current_page, pageselected); <br/> containers. empty (); <br/> links. appendto (containers); <br/> var continuepropagation = opts. callback (current_page, containers); <br/> If (! Continuepropagation) {<br/> If (EVT. stoppropagation) {<br/> EVT. stoppropagation (); <br/>}< br/> else {<br/> EVT. cancelbubble = true; <br/>}< br/> return continuepropagation; <br/>}</P> <p> current_page = opts. current_page; <br/> containers. data ('current _ page', current_page); <br/> // create a sane value for maxentries and items_per_page <br/> maxentries = (! Maxentries | maxentries <0 )? 1: maxentries; <br/> opts. items_per_page = (! Opts. items_per_page | opts. items_per_page <0 )? 1: opts. items_per_page; </P> <p> If (! $. Paginationrenderers [opts. renderer]) <br/>{< br/> throw new referenceerror ("pagination Renderer '" + opts. renderer + "'Was not found in jquery. paginationrenderers object. "); <br/>}< br/> Renderer = new $. paginationrenderers [opts. renderer] (maxentries, opts); </P> <p> containers. each (function () {<br/> // attach control functions to the DOM element <br/> This. selectpage = function (page_id) {pageselected (page_id) ;}< br/> This. prevpage = function () {<br/> var current_page = containers. data ('current _ page'); <br/> If (current_page> 0) {<br/> pageselected (current_page-1); <br/> return true; <br/>}< br/> else {<br/> return false; <br/>}< br/> This. nextpage = function () {<br/> var current_page = containers. data ('current _ page'); <br/> If (current_page <numpages ()-1) {<br/> pageselected (current_page + 1 ); <br/> return true; <br/>}< br/> else {<br/> return false; <br/>}< br/>}); <br/> // when all initialisation is done, draw the Links <br/> links = Renderer. getlinks (current_page, pageselected); <br/> containers. empty (); <br/> links. appendto (containers); <br/> // call callback function <br/> opts. callback (current_page, containers); </P> <p >}< br/>}) (jquery); <br/>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
