https://www.mof.gov.tw/js/jquery/jquery.ipaginate.js

1(function($) {
2	$.fn.ipaginate = function(options) {
3		var opts = $.extend({}, $.fn.ipaginate.defaults, options);
4		
5		return this.each(function() {
6			$this = $(this);
7			
8			//產生Grid資料和分頁器
9			$.fn.getPaginationData(opts.page, opts, $this);
10		});		
11	};
12	
13	$.fn.paginate.defaults = {
14		page: 1,//要顯示第幾頁資料
15		pageSize: 10,//每頁顯示幾筆資料
16		url: null,//索取資料URL
17		gridSelection: null,//放置grid資料tbody的選擇器
18		gridColumns: null//grid欄位名稱
19	};
20	
21	//依指定的URL跟伺服器取得總頁數以及分頁資料
22	$.fn.getPaginationData = function(page, opts, selectedObj) {
23		$.getJSON(opts.url, 
24				{
25					page: page,
26					pageSize: opts.pageSize
27				}, 
28				function(jsonData) {
29					if(jsonData) {
30						$.fn.createGrid(jsonData, opts);//產生Grid區塊
31						$.fn.createPagination(page, jsonData.pageCount, opts, selectedObj);//產生分頁器區塊
32					}
33				});
34	}
35	
36	//使用jquery.paginate來產生分頁器區塊
37	$.fn.createPagination = function(page, pageCount, opts, selectedObj) {
38		//selectedObj.paginate({
39		$("div#pagination").paginate({
40			count 		: pageCount,
41			start 		: page,
42			display     : 10,
43			border					: true,
44			border_color			: '#BEF8B8',
45			text_color  			: '#68BA64',
46			background_color    	: '#E3F2E1',	
47			border_hover_color		: '#68BA64',
48			text_hover_color  		: 'black',
49			background_hover_color	: '#CAE6C6',
50			rotate      : false,
51			images		: false,
52			mouse		: 'press',
53			onChange    : function(page){
54				$.fn.getPaginationData(page, opts, selectedObj);//點擊分頁器後，重新產生Grid資料以及分頁器
55            } 
56		});
57	}
58	
59	//產生Grid區塊
60	$.fn.createGrid = function(jsonData, opts) {
61		var insetViewData = "";
62		var aaData = jsonData.aaData;
63		$.each(aaData, function(index, items) {
64	        	insetViewData += $.fn.createTR(items, opts);
65	         });
66
67		$(opts.gridSelection).html(insetViewData);
68	}
69
70	//產生Grid區塊內單行資料，不同的Grid會因為顯示的欄位名稱不同而有所調整
71	$.fn.createTR = function(obj, opts){
72		var tr = "<tr>";
73		$.each(opts.gridColumns, function(i, columnName) {
74			tr += "<td class=\""+ columnName +"\">" + obj[columnName] + "</td>";
75			     	
76		});
77		tr += "</tr>";
78		return tr;
79	}
80})(jQuery);