https://smartcity.org.tw/js/jquery.quickpaginate.js

1/* ===========================================================================
2 *
3 * JQuery Quick Pagination
4 * Version 1.0.1
5 * Quick and dirty pagination for pretty much any set of elements on the page.
6 *
7 * Author: Mark Perkins
8 * Author email: [email protected]
9 * For full documentation and more go to http://projects.allmarkedup.com/jquery_quick_paginate/
10 *
11 * ---------------------------------------------------------------------------
12 *
13 * LICENCE:
14 *
15 * Released under a MIT Licence. See licence.txt that should have been supplied with this file,
16 * or visit http://projects.allmarkedup.com/jquery_quick_paginate/licence.txt
17 *
18 * ---------------------------------------------------------------------------
19 * 
20 * EXAMPLES OF USE:
21 *
22 * jQuery('.news_item').quickpaginate(); // would paginate all items on the page with the class of 'news_item'
23 * 
24 * jQuery('div#quick_slideshow img').quickpaginate(); // would paginate all img elements within the div with an id of 'quick_slideshow'
25 *
26 * // Paginate everything with the class of "news_item",
27 * // 5 per 'page' and without the page counter.
28 * jQuery('.news_item').quickpaginate( { perpage: 5, showcounter: false } ); 
29 *
30 * // Paginate all img elements and the element with the id of "info",
31 * // with the prev/next/counter element appended to the element with the id of "pager_here"
32 * jQuery('img, #info').quickpaginate({ pager : $("#pager_here") });
33 *
34 */
35
36jQuery.fn.quickpaginate = function( settings ) {
37
38	settings = jQuery.extend({
39		/*
40		perpage(選填)
41		描述： 每頁的筆數
42		預設值： 6
43		 
44		pager(選填)
45		描述： 用來放置上下頁鈕的 jQuery 選擇器：若沒提供則會附加å

45œ¨æ¸…單的最後
46		預設值： null
47		 
48		perpage(選填)
49		描述： 是否顯示頁數；例如 2/4 等
50		預設值： true
51		 
52		prev(選填)
53		描述： 上一頁鈕的 className
54		預設值： "qp_next"
55		 
56		next(選填)
57		描述： 下一頁鈕的 className
58		預設值： "qp_prev"
59		 
60		pagenumber(選填)
61		描述： 顯示目前頁數的元素的 className
62		預設值： "qp_pagenumber"
63		 
64		totalnumber(選填)
65		描述： 顯示全部頁數的元素的 className
66		預設值： "qp_totalnumber"
67		 
68		counter(選填)
69		描述： 放置頁數的元素的 className
70		預設值： "qp_counter"
71		*/  
72		perpage: 6,
73		
74		pager : null,
75		
76		showcounter : true,
77		
78		prev : "qp_next",
79
80		next : "qp_prev",
81		
82		pagenumber : "qp_pagenumber",
83		
84		totalnumber : "qp_totalnumber",
85		
86		counter : "qp_counter"
87
88	}, settings);
89
90	var cm;
91	
92	var total;
93	
94	var last = false;
95	
96	var first = true;
97	
98	var items = jQuery(this);
99	
100	var nextbut;
101	
102	var prevbut;
103	
104	var init = function()
105	{
106		items.show();
107		
108		total = items.size();
109				
110		if ( items.size() > settings.perpage )
111		{
112			items.filter(":gt("+(settings.perpage-1)+")").hide();
113			
114			cm = settings.perpage;
115			
116			setNav();
117		}
118	};
119	
120	var goNext = function()
121	{
122		if ( !last )
123		{
124			var nm = cm + settings.perpage;
125			items.hide();
126			
127			items.slice( cm, nm ).show();
128			cm = nm;
129			
130			if ( cm >= total  )
131			{
132				last = true;
133				nextbut.addClass("qp_disabled");
134			}
135			
136			if ( settings.showcounter ) settings.pager.find("."+settings.pagenumber).text(cm/settings.perpage);
137			
138			prevbut.removeClass("qp_disabled");
139			first = false;
140		}
141	};
142	
143	var goPrev = function()
144	{
145		if ( !first )
146		{
147			var nm = cm-settings.perpage;
148			items.hide();
149			
150			items.slice( (nm - settings.perpage), nm ).show();
151			cm = nm;
152			
153			if ( cm == settings.perpage  )
154			{
155				first = true;
156				prevbut.addClass("qp_disabled");
157			}
158			
159			if ( settings.showcounter ) settings.pager.find("."+settings.pagenumber).text(cm/settings.perpage);
160			
161			nextbut.removeClass("qp_disabled");
162			last = false;
163		}
164	};
165	
166	var setNav = function()
167	{
168		if ( settings.pager === null )
169		{	
170			settings.pager = jQuery('<div class="qc_pager"></div>');
171			items.eq( items.size() -1 ).after(settings.pager);
172		}
173		
174		//var pagerNav = $('<a class="'+settings.prev+'" href="#">&laquo; Prev</a><a class="'+settings.next+'" href="#">Next &raquo;</a>');
175		var pagerNav = $('<a class="'+settings.prev+'" href="#">◄</a><a class="'+settings.next+'" href="#">►</a>');
176		
177		jQuery(settings.pager).append( pagerNav );
178		
179		if ( settings.showcounter )
180		{
181			var counter = ' <span class="'+settings.counter+'"><span class="'+settings.pagenumber+'"></span> / <span class="'+settings.totalnumber+'"></span></span> ';
182			
183			settings.pager.find("."+settings.prev).after( counter );
184			
185			settings.pager.find("."+settings.pagenumber).text( 1 );
186			settings.pager.find("."+settings.totalnumber).text( Math.ceil(total / settings.perpage) );
187		}
188
189		nextbut = settings.pager.find("."+settings.next);
190			
191		prevbut = settings.pager.find("."+settings.prev);
192		
193		prevbut.addClass("qp_disabled");
194		
195		nextbut.click(function(){
196			goNext();
197			return false;
198		});
199		
200		prevbut.click(function(){
201			goPrev();
202			return false;
203		});
204		
205	};
206	
207	init(); // run the function
208};