quickSearch tablo içinde ki veriler içerisinde arama yapmamıza olanak sağlayan bir jquery eklentisi. Eklentinin ana sayfasına buradan ulaşabilirsiniz. Eklenti gayet hızlı çalışıyor ve arama işinde de gayet başarılı. Buradan içerisinde çok kayıt bulunan bir tabloda ki performansını görebilirsiniz. İnsan neden böyle bir eklentiye ihtiyaç duyar gibisinden bir soru gelebilir. Alınan raporlarda, ürün listelerinde vb.. yerlerde formu post edip, veritabanına istek göndermek bu tarz bir eklenti varken gereksiz olur, üstelik sayfa yeniden yüklenmeyeceğinden ayrıca bir performans kazanımı söz konusu oluyor. Şöyle de bir durum var 10bin 100bin kayıt olan yerlerde böyle bir çözüm söz konusu olamaz. Eklentinin çaışma mantığı gayet basit, nihayetinde biz veritabanından gelen veriyi tablomuza dolduruyoruz. Eklenti tablo içerisinde ki verilerden bizim kriterlerimize uygun olan olanları gösteriyor, diğerlerini ise gizliyor. Birde unutmadan eklenti sadece table içerisinde arama yapmıyor, liste elemanları içerisinde de arama yapabiliyor, bu bilgilere eklentinin sayfasından ulaşabilirsiniz. Örneğim de kullandığım tablo şablonunu buradan aldım, illa bu tarz bir şablon kullanacaksınız diye bir şartta yok, istediğiniz tasarıma kolayca entegre edebilirsiniz. İlerleyen günlerde yine jquery eklentisiyle, tablo içerisinde arama, sıralama ve sayfalama işlemlerinin kolayca yapılmasına olanak tanıyan başka bir eklentiye bakacağız. Bu eklentiler sayesinde gridView den bir nebzede olsa uzaklaşmış olacağız, zaten bu tarz şeyler varken kim gridview kullanır ki ?
www.jquerydot.net sitesi de benim. Bundan dolayı oradan arakladığımı felan düşünmeyin :) Zaten burada ki yazıyı google translate ile çevirirsenin oradaki yazının aynısının olduğunu farkedeceksiniz :)
<script type="text/javascript">
$(function() {
$('input#search').quicksearch('table#gradient-style tbody tr', {'loader': 'span.loading'});
});
</script>
Search <input type="text" name="search" id="search" /><span class="loading">Loading..</span>
<table id="gradient-style" summary="Meeting Results">
<thead>
<tr>
<th scope="col">Company Name</th>
<th scope="col">Contact Name</th>
<th scope="col">Contact Title</th>
<th scope="col">Address</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">Total <strong><asp:Literal runat="server" ID="ltrTotalRecord" /></strong> records</td>
</tr>
</tfoot>
<tbody>
<asp:Repeater runat="server" ID="rpCustomers">
<ItemTemplate>
<tr>
<td><%#Eval("companyname") %></td>
<td><%#Eval("contactname") %></td>
<td><%#Eval("contacttitle") %></td>
<td><%#Eval("address") %></td>
</tr>
</ItemTemplate>
</asp:Repeater>
</tbody>
</table>
Default.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
rpCustomers.DataSource = db.DTGetir("Select * from customers");
rpCustomers.DataBind();
ltrTotalRecord.Text = rpCustomers.Items.Count.ToString();
}
Buradan örneği indirebilir, buradan da çalışan örneğine bakabilirsiniz.