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ı
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="row"> <input id="myInput" class="form-control" type="text" placeholder="Ara.."> </div> <div class="row"> <table class="table table-bordered table-hover table-striped table-sm"> <thead> <tr> <th>#</th> <th>First</th> <th>Last</th> <th>Handle</th> </tr> </thead> <tbody id="myTable"> <tr> <th>1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th>2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th>3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"> </script> </body> </html> |
Css Kodları
|
1 2 3 4 5 6 7 8 9 10 |
#myInput { max-width: 300px; } .row { margin-bottom: 10px; margin-top: 10px; } |
Jquery Kodları
|
1 2 3 4 5 6 7 8 9 10 |
$(document).ready(function () { $("#myInput").on("keyup", function () { var value = $(this).val().toLowerCase(); $("#myTable tr").filter(function () { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); |
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.
