Tablo Kısaltma ve Arama & Table Sort and Search

Merhaba arkadaşlar, uzun zamandan beri aradğım ve aslında değim yerindeyse burnumun dibinde olan bir uygulamayı şimdi size anlatmaya çalışacağım

Öncelikle başlıktaki cümleyi açıklamayla başlayalım.Tablo kısaltma ile ne anlatmak istedin? der gibi olabilirsiniz.Web sitesi yapan arkadaşlar için sayfalama yapmak basit ama uğraştıran bir işlem ayrıca SQL sorgularına girmek ve farklı sayfalarda sorgu çalıştırmayıda katarsak baya yer kaplayan bir uğraş oluyor.Bildiğiniz gibi artık eskisi gibi sayfa yenileme olayı kalktı ve ortalık javascript kodlarına ve jquery kütüphanelerine kaldı.

Sayfalama ve arama ile ilgili basit ama etkili bir jquery uygulamasını sizinle paylaşmak istiyorum.

Öncelikle bu uygulamada table kullancağız ve table'daki verilerimizi jquery ile çok kolay bir biçimde sayfalamaya koyacağız ayrıca vereceğim javascript kodu ile istediğiniz alanda arama yapabileceksiniz.

Hemen başlayalım

Öncelikle projenize aşağıdaki .js dosyalarını include edin
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="js/table.js" type="text/javascript"></script>
<script src="js/table.pager.js" type="text/javascript"></script>
<script src="js/ozel.js" type="text/javascript"></script>Şimdi tablomuza biraz şekil vereceğiz
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css"></link>
Şimdi sıra tablomuza geldi istediğiniz şekilde sıralayabilirsiz tablonuzu orası size kalmış ben aşağıdaki gibi bir örnek sunuyorum
<table id="veri-formu" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
        <thead>
<tr>
                <th>Sıra No</th>
                <th>Ad soyad</th>
                <th>Doğum Yeri</th>
                <th>Doğum Tarihi</th>
                <th>Web Sitesi</th>
            </tr>
</thead>
        <tbody>
<tr>
                <td>1</td>
                <td id="sec">Melih KURT</td>
                <td>Eskişehir</td>
                <td>04.03.1987</td>
                <td>http://fistikblog.blogspot.com/</td>
            </tr>
<tr>
              <td>2</td>
              <td id="sec">Murat ÇAĞLAK</td>
              <td>Konya</td>
              <td>15.08.1956</td>
              <td>http://fistikblog.blogspot.com/</td>
          </tr>
<tr>
              <td>3</td>
              <td id="sec">Hakan CAN</td>
              <td>Adana</td>
              <td>04.03.1986</td>
              <td>http://fistikblog.blogspot.com/</td>
          </tr>
</tbody>
      </table> Buraya kadar herşeyi eklediniz ve normal çalışıyorsa doğru yapmışsınız demektir.Şimdi ise sırada Arama(search) kısmı var.

Arama kısmında hangi alanda arama yapmak istiyorsanız tbody > td içersinde istediğiniz bölüme id="sec" ekleyerek o bölümde arama yaptırmış olursunuz.
Arama için öncelikle aşağıdaki text i projenize ekleyin
<label for="kwd_search">Search:</label> <input type="text" id="kwd_search" placeholder="ARAMAK İSTEDİĞİN İSİM" value="" size="70"/>
Şimdi ise arama yapmak için arama.js diye bir dosya oluşturup aşağıdaki kodu içerisine yapıştırın

/* jquery for search nad filter table start*/

    $(document).ready(function(){
        // Write on keyup event of keyword input element
        $("#kwd_search").keyup(function(){
            // When value of the input is not blank
        var term=$(this).val()
            if( term != "")
            {
                // Show only matching TR, hide rest of them
                $(".tablesorter tbody>tr").hide();
            $(".tablesorter td#sec").filter(function(){
               return $(this).text().toLowerCase().indexOf(term ) >-1
            }).parent("tr").show();
            }
            else
            {
                // When there is no input or clean again, show everything back
                $(".tablesorter tbody>tr").show();
            }
        });
    });

    /* jquery for search nad filter table ends*/
Aşağıdaki bağlantıları takip edin
İndirDemo