由於項目需要，擴充了Jquery 的Pagination。使得jquery.pagination，可能直接帶參數Ajax請求伺服器並更新對應容器的內容。
記錄下來：
原文地址：http://blog.csdn.net/Vange/archive/2010/07/20/5748477.aspx
===============================================
使用方法：
相關的JQuery庫及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 /> <head><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 /> // calls involved.</p><p> /**<br /> * Callback function that displays the content.<br /> *<br /> * Gets called every time the user clicks on a pagination link.<br /> *<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 only 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 /> </head><br /> <body><br /> <h1>jQuery Pagination Plugin Demo</h1><br /> <div id="Pagination"></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 catalysts for change. Professionally 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 invested 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 /> architectures. 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-a-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><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 /></html><br />
===============================================
修改後的Jquery 的Pagination：jquery.pagination.js
/**<br /> * This jQuery plugin displays pagination links inside the selected elements.<br /> *<br /> * This plugin needs at least jQuery 1.4.2<br /> *<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} jQuery 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 />numPages: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 upper_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.maxentries = 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 {Object} 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){ lnk.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 />interval = 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 />}<br />// Generate interval links<br />this.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, interval.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>// Extend 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:"上頁",<br />next_text:"下頁",<br />ellipse_text:"...",<br />prev_show_always:true,<br />next_show_always:true,<br />renderer:"defaultRenderer",<br />callback:readRemotePage,<br /> showRemotePageCallback:showRemotePageCallback,<br />id:"default_pagination",<br />url:"#",<br />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.id;<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 />}<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 = $(evt.target).data('page_id');<br />containers.data('current_page', current_page);<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 />}<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 />}<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 />});<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
