JQuery ile Tabloda Arama Yapmak

Bu yazımızda Jquery ile tablolarda nasıl arama işlemi gerçekleştirebiliriz onu öğreneceğiz.

Eğer dinamik bir web sitesi geliştiriyorsanız bunun bir admin paneli olacaktır. Admin panelde en sık yapılan işlemlerden birisi tablolarda listeleme yapmaktır.

Örneğin bir ETicaret sitesiyse ürünler listelenir, Blog sitesiyse makaleler listelenir vs.. Listelenen sayı artınca tablolarda arama işlemi ihtiyacıda oluşmaya başlar.

Uygulamamızda Bootstrap versiyon 4.1.3’i CDN olarak sayfamıza ekleyip class’larından faydalandım.

Burada arama yapmak için bir input etiketi ve listelemek için de bir table etiketi oluşturdum. İnputun keyup olayında yani klavyede bir tuşa basılıp kaldırılma anında, tablonun satırlarında var olup olmama durumunu kontrol ediyoruz.

Varolanlar görünmeye devam ederken olmayanlarıda Jquery toggle metodu ile gizliyoruz.

Uygulamayı incelediğinizde daha anlaşılır olacaktır.

Html Kodları

Css Kodları

Jquery Kodları

Uygulamamızın Son Hali

Umarım sizin için faydalı bir yazı olmuştur.

Şu yazılar da ilginizi çekebilir.

JQuery ile Kalan Karakter Sayısı Uygulaması 

JQuery ile Listede Arama Yapmak

Yeni bir yazımda görüşmek üzere.

Leave a Reply