Home » jQuery 外掛

[jQ]tablePagination 0.5

[ 日期： | 瀏覽：7,847 | 迴響：2 ]
範例 1
請協助我把這個效果加到我的網站 (只要 1,200 元)
沒錯!只要 1,200 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!



是否有時候會覺得表格落落長的不方便查看呢？tablePagination 是一個可以幫表格產生分頁導航列的外掛套件。只要透過簡單的設定，就能自動產生專數的分頁導航列喔！

不過 tablePagination 所產生的分頁導航列是用 id 去區別，雖然它程式的寫法在重覆 id 情況下是可以的，但總覺得"毛毛的"。

套件名稱：tablePagination
套件版本：0.5
作者網站：http://neoalchemy.org/tablePagination.html
套件網址：N/A
發佈日期：2011-11-01
檔案大小：7.43 KB
檔案下載：jquery.tablePagination.0.5.js
圖檔下載：images.zip

參數選項說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

firstArrow(選填)
描述： 切換到第一頁的按鈕圖片, 必需為 Image 物件
預設值： (new Image()).src="./images/first.gif"
 
prevArrow(選填)
描述： 切換到上一頁的按鈕圖片, 必需為 Image 物件
預設值： (new Image()).src="./images/prev.gif"
 
lastArrow(選填)
描述： 切換到最後一頁的按鈕圖片, 必需為 Image 物件
預設值： (new Image()).src="./images/last.gif"
 
nextArrow(選填)
描述： 切換到上一頁的按鈕圖片, 必需為 Image 物件
預設值： (new Image()).src="./images/next.gif"
 
topNav(選填)
描述： 設定分頁導航列顯示在表格的上方, 若設為 false 則會在表格的下方
預設值： false
 
rowsPerPage(選填)
描述： 每一頁顯示幾筆資料
預設值： 5
 
currPage(選填)
描述： 預設顯示第幾頁
預設值： 1
 
optionsForRows(選填)
描述： 設定可供選擇的每頁幾筆的下拉選單選項
預設值： [5,10,25,50,100]
 
ignoreRows(選填)
描述： 要忽略的列(tr), 要自己事先把要忽略的列隱藏起來
預設值： []

方法說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11

// 使用動畫效果
$(selector).animate(properties [, duration] [, easing] [, complete]);
 
// 使用動畫效果
$(selector).animate(properties, options);
 
// 停止動畫效果
$(selector).animate([queue] [, clearQueue] [, jumpToEnd]);
 
// 從 CSS3 的 Matrix 中取得指定元素在 transform 中的 x 及 y 座標
$(selector').translation();

使用範例：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tablePagination.0.5.js"></script>
<style type="text/css">
	td { 
		border: 1px solid black; 
	}
	table { 
		border: thick solid black;
		width: 100%; 
	}
	#testTable { 
		width : 350px;
	}
	#tablePagination { 
		background-color: #DCDCDC; 
		font-size: 0.8em; 
		padding: 0px 5px; 
		height: 20px
	}
	#tablePagination_paginater { 
		margin-left: auto; 
		margin-right: auto;
	}
	#tablePagination img { 
		padding: 0px 2px; 
	}
	#tablePagination_perPage { 
		float: left; 
	}
	#tablePagination_paginater { 
		float: right; 
	}
</style>
<script type="text/javascript">
	$(function(){
		// 設定每頁 3 筆, 預設顯示第 2 頁, 每頁選項只有 2, 3, 5
		// 並且把分頁導航列放在表格上方
		$('#menuTable').tablePagination({
			rowsPerPage : 3,
			currPage : 2, 
			optionsForRows : [2,3,5],
			topNav : true
		});
	});
</script>
 
<body>
	<div id="testTable">
		<table id="menuTable">
			<thead>
				<tr>
					<td>Item</td><td>Cost</td><td>Description</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>No. 1</td><td>$1.50</td><td>Fake Description</td>
				</tr>
				<tr>
					<td>No. 2</td><td>$2.50</td><td>Made up word</td>
				</tr>
				<tr>
					<td>No. 3</td><td>$6.63</td><td>Something is a Something</td>
				</tr>
				<tr>
					<td>No. 4</td><td>$1.20</td><td>Blah Blah </td>
				</tr>
				<tr>
					<td>No. 5</td><td>$1.11</td><td>Great one dude</td>
				</tr>
				<tr>
					<td>No. 6</td><td>$6.42</td><td>Have no idea what to type</td>
				</tr>
				<tr>
					<td>No. 7</td><td>$2.52</td><td>Sometimes you feel like a nut</td>
				</tr>
				<tr>
					<td>No. 8</td><td>$4.51</td><td>Snickers</td>
				</tr>
				<tr>
					<td>No. 9</td><td>$1.21</td><td>That's mmm mmm good</td>
				</tr>
				<tr>
					<td>No. 10</td><td>$0.99</td><td>Pizza</td>
				</tr>
				<tr>
					<td>No. 11</td><td>$3.99</td><td>Root Beer Floats</td>
				</tr>
				<tr>
					<td>No. 12</td><td>$5.99</td><td>Large bag of Gumdrops</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

2 筆針對 [jQ]tablePagination 0.5 的迴響

  1. 請問可不可以表格上下都能顯示正常呢?
    我刪了before、after的if&else判斷，似乎有些設定會重設
    比如我設定顯現上方，下方的per page&箭頭等都會失效..

    • 因為它的那些控制元素都是用 id 去命名, 因為當你上下都加時, 就只有上方的才有效。
      如果想上下都有的話, 應該就要把它原本用 id 來命名的部份都改用 .class 才行, 當然相對應的程式也要修改!

發表迴響