Home » jQuery 外掛

[jQ]Column Filters 1.1.0

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

Column Filters 1.1.0

有時候表格資料較多時要找到想要的資料會比較麻煩，此時就能透過篩選關鍵字的方式來縮小瀏覽的範圍。而 Column Filters 能設定那些欄位是否允許篩選及一些條件的限制，讓使用者能方便的做篩選查詢。

套件名稱：Column Filters
套件版本：1.1.0
作者網站：http://www.tomcoote.co.uk/jQueryColumnFilters.aspx
套件網址：http://plugins.jquery.com/project/ColumnFilters
發佈日期：2009-03-29
檔案大小：6.87 KB
檔案下載：jquery.columnfilters.js

參數說明：

檢視原始碼 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

wildCard(選填)
描述： 用來匹配全部字元的篩選條件
預設值： "*"
 
notCharacter(選填)
描述： 放在篩選字串前用來表示結果不包含的篩選條件
預設值： "!"
 
caseSensitive(選填)
描述： 是否區分大小寫
預設值： false
 
minSearchCharacters(選填)
描述： 最少要幾個字元來篩選
預設值： 1
 
excludeColumns(選填)
描述： 那些欄位不允許篩選(陣列)
預設值： []
 
alternateRowClassNames(選填)
描述： 篩選欄位的 ClassName(陣列)
預設值： []
 
underline(選填)
描述： 在搜尋過濾時是否加上底線表示處理中
預設值： false

方法說明：

檢視原始碼 JavaScript
1
2

// 使用 columnFilters 功能
$(selector).columnFilters([settings]);

使用範例：

檢視原始碼 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

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.columnfilters.js"></script>
<style type="text/css">
	table tr th {
		background-color: #d3DADE;
		padding: 3px;
	}
	table tr.rowb {
		background-color:#EAf2FD;
	}
	table tr.filterColumns td {
		padding:2px;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 設定最後兩個欄位不使用篩選器、篩選區分大小寫
		// 篩選最少要2字元及篩選欄位的 ClassName
		$('table#filterTable1').columnFilters({
			excludeColumns:[2, 3],
			caseSensitive:true,
			minSearchCharacters:2,
			alternateRowClassNames:['rowa','rowb']
		});
	});
</script>
 
<body>
	<table id="filterTable1" cellspacing="0" cellpadding="0">
		<thead>
			<tr>
				<th>First Name</th><th>Surname</th><th>Country</th><th>Number</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Tom</td><td>Coote</td><td>United Kingdom</td><td>1234</td>
			</tr>
			<tr>
				<td>Bob</td><td>Edwards</td><td>Australia</td><td>15876</td>
			</tr>
			<tr>
				<td>Eddy</td><td>Hornblower</td><td>France</td><td>1234</td>
			</tr>
			<tr>
				<td>Steve</td><td>Blode</td><td>USA</td><td>9835</td>
			</tr>
			<tr>
				<td>Jeffrey</td><td>Gnome</td><td>Switzerland</td><td>0159</td>
			</tr>
			<tr>
				<td>Terry</td><td>Winkleman</td><td>Canada</td><td>023</td>
			</tr>
		</tbody>
	</table>
 
	<ul>
		<li>區分大小寫
		<li>最少要2字元
	</ul>
</body>
範例 1

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

發表迴響