รูปแบบการใข้งาน Quicksearch จะเป็นการอำนวยความสะดวกในการค้นหาข้อมูล จากรายการ
ข้อมูลทั้งหมดที่แสดงตั้งแต่ต้น โดย jQuery quicksearch plugin มีลูกเล่น และการปรับใช้งาน
ได้อย่างดี
สามารถดาวน์โหลด และศึกษาวิธีการใช้งาน เพิ่มเติมได้ที่
https://github.com/riklomas/quicksearch
ตัวอย่างการใช้งานอย่างง่าย
| Id | Phone | Total | Ip | Url | Time | ISO Date | UK Date | |
|---|---|---|---|---|---|---|---|---|
| [email protected] | 66672 | 941-964-8535 | $2482.79 | 172.78.200.124 | http://gmail.com | 15:10 | 1988/12/14 | 14/12/1988 |
| [email protected] | 35889 | 941-964-9543 | $2776.09 | 119.232.182.142 | http://www.gmail.com | 3:54 | 1974/1/19 | 19/1/1974 |
| [email protected] | 60021 | 941-964-5617 | $2743.41 | 167.209.64.181 | http://www.dotnet.ca | 10:58 | 2000/3/25 | 25/3/2000 |
| [email protected] | 17927 | 941-964-9511 | $2998.18 | 210.214.231.182 | http://google.se | 21:22 | 1993/1/24 | 24/1/1993 |
| [email protected] | 76375 | 941-964-2757 | $1836.09 | 220.222.93.171 | http://www.samba.org | 15:22 | 1988/4/4 | 4/4/1988 |
| [email protected] | 45834 | 941-964-2575 | $2805.46 | 228.170.245.253 | http://flexomat.com | 11:31 | 1975/12/12 | 12/12/1975 |
| [email protected] | 20022 | 941-964-4967 | $3296.54 | 175.248.70.240 | http://www.flexomat.com | 4:27 | 2002/7/3 | 3/7/2002 |
| [email protected] | 55977 | 941-964-745 | $2953.73 | 222.114.227.156 | http://www.donuts.com | 23:49 | 1977/8/4 | 4/8/1977 |
| [email protected] | 38867 | 941-964-6302 | $1949.27 | 116.241.143.196 | http://flexomat.com | 23:35 | 1995/7/27 | 27/7/1995 |
| [email protected] | 51426 | 941-964-1234 | $1067.00 | 88.96.149.82 | http://www.polyester.se | 15:17 | 1986/1/5 | 5/1/1986 |
| [email protected] | 40859 | 941-964-4856 | $3401.19 | 68.152.250.74 | http://www.flexomat.com | 4:36 | 1990/3/7 | 7/3/1990 |
| [email protected] | 23986 | 941-964-2686 | $1393.52 | 98.102.181.138 | http://lostnfound.org | 5:51 | 1993/7/22 | 22/7/1993 |
| [email protected] | 73392 | 941-964-5792 | $3876.04 | 246.234.182.243 | http://www.google.se | 6:52 | 1984/7/14 | 14/7/1984 |
| [email protected] | 03519 | 941-964-1599 | $1176.48 | 104.212.122.177 | http://donutsx.com | 18:52 | 2000/8/6 | 6/8/2000 |
โค้ดตัวอย่าง การใช้งานเบื้องต้น และคำอธิบาย
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery quick search</title>
<style type="text/css">
* {
font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
font-size:12px;
}
table#table_example2 {
width: 100%;
border-collapse: collapse;
margin: 1em 0;
}
table#table_example2 thead th {
background: #f34105;
color: #fff;
}
table#table_example2 tbody th {
text-align: left;
}
table#table_example2 th, table#table_example2 td {
border: 1px solid #ddd;
padding: 2px 5px;
font-size: 100%;
}
.odd, .r1 {
background: #fff;
}
.even, .r2 {
background: #eee;
}
.r3 {
background: #ebebeb;
}
.search {
font-weight: bold;
}
.show {
background-color:#FC0;
}
.odd, .r1 { background: #fff; }
.even, .r2 { background: #eee; }
.r3 { background: #ebebeb; }
.search { font-weight: bold; }
</style>
</head>
<body>
<form action="#">
<fieldset>
<input name="search" type="text" id="id_search2" value="" size="50" />
<span class="loading">Loading...</span>
</fieldset>
</form>
<table id="table_example2">
<thead>
<tr>
<th width="30%">Email</th>
<th width="10%">Id</th>
<th width="10%">Phone</th>
<th width="10%">Total</th>
<th width="10%">Ip</th>
<th width="10%">Url</th>
<th width="10%">Time</th>
<th width="10%">ISO Date</th>
<th width="10%">UK Date</th>
</tr>
</thead>
<tbody>
<tr>
<th>[email protected]</th>
<td>66672</td>
<td>941-964-8535</td>
<td>$2482.79</td>
<td>172.78.200.124</td>
<td>http://gmail.com</td>
<td>15:10</td>
<td>1988/12/14</td>
<td>14/12/1988</td>
</tr>
<tr>
<th>[email protected]</th>
<td>35889</td>
<td>941-964-9543</td>
<td>$2776.09</td>
<td>119.232.182.142</td>
<td>http://www.gmail.com</td>
<td>3:54</td>
<td>1974/1/19</td>
<td>19/1/1974</td>
</tr>
<tr>
<th>[email protected]</th>
<td>60021</td>
<td>941-964-5617</td>
<td>$2743.41</td>
<td>167.209.64.181</td>
<td>http://www.dotnet.ca</td>
<td>10:58</td>
<td>2000/3/25</td>
<td>25/3/2000</td>
</tr>
<tr>
<th>[email protected]</th>
<td>17927</td>
<td>941-964-9511</td>
<td>$2998.18</td>
<td>210.214.231.182</td>
<td>http://google.se</td>
<td>21:22</td>
<td>1993/1/24</td>
<td>24/1/1993</td>
</tr>
<tr>
<th>[email protected]</th>
<td>76375</td>
<td>941-964-2757</td>
<td>$1836.09</td>
<td>220.222.93.171</td>
<td>http://www.samba.org</td>
<td>15:22</td>
<td>1988/4/4</td>
<td>4/4/1988</td>
</tr>
<tr>
<th>[email protected]</th>
<td>45834</td>
<td>941-964-2575</td>
<td>$2805.46</td>
<td>228.170.245.253</td>
<td>http://flexomat.com</td>
<td>11:31</td>
<td>1975/12/12</td>
<td>12/12/1975</td>
</tr>
<tr>
<th>[email protected]</th>
<td>20022</td>
<td>941-964-4967</td>
<td>$3296.54</td>
<td>175.248.70.240</td>
<td>http://www.flexomat.com</td>
<td>4:27</td>
<td>2002/7/3</td>
<td>3/7/2002</td>
</tr>
<tr>
<th>[email protected]</th>
<td>55977</td>
<td>941-964-745</td>
<td>$2953.73</td>
<td>222.114.227.156</td>
<td>http://www.donuts.com</td>
<td>23:49</td>
<td>1977/8/4</td>
<td>4/8/1977</td>
</tr>
<tr>
<th>[email protected]</th>
<td>38867</td>
<td>941-964-6302</td>
<td>$1949.27</td>
<td>116.241.143.196</td>
<td>http://flexomat.com</td>
<td>23:35</td>
<td>1995/7/27</td>
<td>27/7/1995</td>
</tr>
<tr>
<th>[email protected]</th>
<td>51426</td>
<td>941-964-1234</td>
<td>$1067.00</td>
<td>88.96.149.82</td>
<td>http://www.polyester.se</td>
<td>15:17</td>
<td>1986/1/5</td>
<td>5/1/1986</td>
</tr>
<tr>
<th>[email protected]</th>
<td>40859</td>
<td>941-964-4856</td>
<td>$3401.19</td>
<td>68.152.250.74</td>
<td>http://www.flexomat.com</td>
<td>4:36</td>
<td>1990/3/7</td>
<td>7/3/1990</td>
</tr>
<tr>
<th>[email protected]</th>
<td>23986</td>
<td>941-964-2686</td>
<td>$1393.52</td>
<td>98.102.181.138</td>
<td>http://lostnfound.org</td>
<td>5:51</td>
<td>1993/7/22</td>
<td>22/7/1993</td>
</tr>
<tr>
<th>[email protected]</th>
<td>73392</td>
<td>941-964-5792</td>
<td>$3876.04</td>
<td>246.234.182.243</td>
<td>http://www.google.se</td>
<td>6:52</td>
<td>1984/7/14</td>
<td>14/7/1984</td>
</tr>
<tr>
<th>[email protected]</th>
<td>03519</td>
<td>941-964-1599</td>
<td>$1176.48</td>
<td>104.212.122.177</td>
<td>http://donutsx.com</td>
<td>18:52</td>
<td>2000/8/6</td>
<td>6/8/2000</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jquery.quicksearch.js"></script>
<script type="text/javascript">
$(function(){
$('input#id_search2').quicksearch('table#table_example2 tbody tr', {
'delay': 300, // หน่วงเวลาการทำงาน ในที่นี้กำหนด 300 มิลลิวินาที
/* 'selector': 'th',*/ // กำหนด หากต้องการหาเฉพาะ ในคอลัมน์ที่ต้องการ
'stripeRows': ['odd', 'even'], // กำหนดการสลับสี ของแถวในตารางด้วย css class
'loader': 'span.loading', // ส่วนสำหรับกำหนด ข้อความ loading ในที่นี่คือ span ที่มี class เท่ากับ loading
'bind': 'keyup click', // เงื่อนไข event เมื่อคลิก หรือพิมพ์ที่ช่องค้นหา
'show': function (){ //
this.style.color = '';
},
'hide': function () { // สีของข้อความในแถวที่ไม่ตรงเงื่อนไขการค้นหา
this.style.color = '#ccc';
},
'prepareQuery': function (val) {// คืนค่ารูปแบบ pattern ของ Regular Expression สำหรับตรวจสอบ
return new RegExp(val, "i");
},
'testQuery': function (query, txt, _row) { // คืนค่า ตรวจสอบ แถวที่มีค่า ตามข้อมูลที่ค้นหา
return query.test(txt);
}
});
// val คือ ค่าของข้อมูลใน textbox เพื่อนำไปใช้จัดรูปแบบ pattern
// query คือ ค่ารูปแบบ pattern ของ Regular Expression
// txt คือข้อความทั้งหมดในแต่ละแถวในตาราง
// _row คือ Object ของ แถว (tr) ทั้งหมดในแต่ละแถวในตาราง
});
</script>
</body>
</html>
