JavaScript ve Ajax kullanarak sıralama ve filtreleme işlemleri nasıl yapılır? Bu makalede detaylı olarak ele aldık İhtiyacınıza göre sıralama ve filtreleme işlemlerini yapabilmeniz için gerekli tüm bilgileri paylaştık Ayrıca, örnek kodlarla işlemleri daha iyi anlayabilirsiniz Hemen okuyun!
Bir web sitesinde yayınlanan verilerin sıralanması ve filtrelenmesi bazen kullanıcılar için önemli bir özellik olabilir. Bu özellikler web sitelerine daha fazla interaktif özellik katarken, site ziyaretçilerine de zaman kazandırır. Bu nedenle bu özelliklerin bir web sayfasında bulunması oldukça önemlidir. Bu makalede sizlere JavaScript ve Ajax kullanarak bir web sayfasındaki listeleri ve tabloları nasıl sıralayacağınızı ve filtreleyeceğinizi anlatacağız.
JavaScript kullanarak bir web sayfasındaki listeleri alfabetik veya sayısal olarak sıralayabilirsiniz. Ancak tabloların filtrelenmesi işlemi için yalnızca JavaScript yeterli olmayacaktır. Bu noktada Ajax devreye girer. Asenkron JavaScript ve XML'in kısaltması olan Ajax, sunucu ile iletişim kurarak sayfa içeriğinde değişiklik yapmanızı sağlar. Bu nedenle tablo filtreleme işleminde Ajax kullanılması gerekmektedir.
Liste Sıralama
Web sayfalarında sıklıkla kullanılan bir özellik, listelerin alfabetik veya sayısal olarak sıralanmasıdır. Bu özelliği, JavaScript kullanarak oldukça kolay bir şekilde gerçekleştirebilirsiniz. Öncelikle, sıralama işlemi için bir fonksiyon oluşturmanız gerekiyor. Bu fonksiyon, listenin içindeki öğeleri karşılaştırarak sıralama işlemini gerçekleştirir.
Ardından, listeyi seçerek ve sıralama fonksiyonunu kullanarak sıralamayı gerçekleştirebilirsiniz. Sıralama işlemi yapıldıktan sonra, sayfada görüntülenen listenin güncellenmesi gerekiyor. Bu nedenle, DOM manipülasyonu yaparak listeyi güncelleyebilirsiniz.
Aşağıdaki örnek kod, bir listedeki öğelerin alfabetik olarak sıralanmasını sağlar:
// Liste öğelerivar liste = ["Muz", "Elma", "Karpuz", "Armut"];// Sıralama fonksiyonufunction sirala(liste) { liste.sort(); return liste;}// Listeyi sıralama ve güncelleme işlemivar siraliListe = sirala(liste);var listeSectigi = document.querySelector("#liste");listeSectigi.innerHTML = "";for (var i = 0; i < siraliListe.length; i++) { var li = document.createElement("li"); li.textContent = siraliListe[i]; listeSectigi.appendChild(li);}Bu örnekte, "liste" adlı bir dizi tanımlanmış ve içine öğeler eklenmiştir. "sirala()" adlı bir fonksiyon, dizi öğelerini alfabetik olarak sıralamak için kullanılmaktadır. Fonksiyon sonrasında, "#liste" id'sine sahip bir element seçilerek içindeki öğeler temizleniyor ve güncellenen sıralanmış listeye göre elemanlar tekrar ekleniyor.
Tablo Filtreleme
Tablo filtremele, web sayfalarının önemli bir özelliğidir ve birçok durumda kullanıcılara daha iyi bir deneyim sunar. Ajax kullanarak tablo filtrelemeyi sağlamak oldukça kolaydır. Bu sayede, kullanıcılara tablodaki verileri kolayca filtreleme imkanı sağlanabilir. Öncelikle, belirli bir kolona göre filtreleme işlemi gerçekleştirmek istediğiniz tabloyu seçmelisiniz.
Tabloyu seçtikten sonra, belirli bir kolona göre filtreleme özelliği eklemek için Ajax kodunu kullanabilirsiniz. Ajax, web sayfalarının etkileşimli özelliklerini artırmak için kullanılan Asenkron JavaScript ve XML kütüphanesidir. Bu kütüphane sayesinde, web sayfanızda gerçek zamanlı olarak filtreleme işlemini gerçekleştirebilirsiniz.
Ajax kullanarak tablo filtreleme işlemini gerçekleştirmek için XMLHttpRequest nesnesini kullanabilirsiniz. Bu nesne yardımıyla, kullanıcının seçtiği belirli bir kolona göre filtreleme işlemini yapabilirsiniz. Ancak, bu işlem oldukça karmaşık ve zorlayıcıdır. Bunun yerine, JQuery gibi kullanışlı bir kütüphane de kullanabilirsiniz.
JQuery kullanarak tablo filtreleme işlemini gerçekleştirmek oldukça kolaydır. Öncelikle, filtreleme işlemi için bir işlev oluşturmalısınız. İşlev, seçtiğiniz kolona göre verileri filtreleyecek ve tablo içerisinde sadece istenilen verileri gösterecektir.
Ayrıca, arama çubuğu ekleyerek filtreleme işlemini daha kullanıcı dostu hale getirebilirsiniz. Bu sayede, kullanıcılar arama çubuğuna istedikleri kelimeyi girdikleri anda, tablodaki belirli bir kolonda bu kelimeye sahip tüm verileri görebilecektir.
Sonuç olarak, tablo filtremele web sayfalarının özelliklerinden biridir ve web sayfanızda kullanacağınız tabloları daha kullanıcı dostu hale getirmenize yardımcı olur. Ajax kullanarak tablo filtremele işlemini gerçekleştirmek oldukça kolaydır ve kullanışlı bir kütüphane olan JQuery ile işlemler daha da kolay bir hale gelmektedir.
Ajax Nedir?
Ajax, "Asenkron Javascript ve XML" kelimelerinin bir araya getirilmesi ile oluşan bir kısaltmadır. Ajax, web sayfalarına etkileşim eklemek, verileri dinamik olarak yüklemek, göstermek, giriş yapmak, düzenlemek gibi birçok işlevi üstlenen bir teknolojidir.
Ajax, web sayfalarında sayfa yenilenmeden arka planda önbellekleme yaparak çalışır. Bu nedenle, sayfa yenileme işleminin ortadan kalkması, web sayfalarının daha hızlı ve kullanıcı dostu hale gelmesini sağlar.
| Ajax'ın Avantajları | Ajax'ın Dezavantajları |
|---|---|
|
|
Web sayfalarında dinamik içerikleri yönetmek için kullanılan Ajax, web sayfalarının daha etkileşimli ve kullanışlı hale gelmesini sağlar. Özellikle liste ve tabloların sıralanması veya filtrelenmesi gibi işlemlerde Ajax'ın kullanımı oldukça yaygındır.
XMLHttpRequest Nesnesi Kullanımı
Ajax istekleri göndermek için XMLHttpRequest nesnesi kullanılabilir. Bu nesne, web tarayıcısının sunucu ile iletişim kurmasını sağlar ve bu sayede web sayfası, kullanıcının sayfayı yenilemeden verileri almasını sağlayabilir.
XMLHttpRequest nesnesi, öncelikle open() yöntemi ile sunucuya bir istek gönderilir. Bu istekte, veri gönderme yöntemi, adres ve asenkron mu senkron mu olacağı belirtilir. Ardından, send() yöntemi ile istek gönderilir ve sunucudan gelen cevap, onreadystatechange olayı ile belirtilen bir işlevde işlenir.
Bu işlem esnasında, kullanıcıya verilen süre boyunca sayfa işlemleri devam edebildiğinden, sayfa daha dinamik ve etkileşimli bir hale gelir. Bu sayede, kullanıcının sayfayı yenilemeden değişiklikleri görmesi ve yapması mümkün hale gelir.
JQuery Ajax Kullanımı
JQuery, web geliştiricilerin Ajax isteklerini daha kolay ve anlaşılır hale getirmek için sıklıkla kullandıkları bir kütüphanedir. Ajax ile ilgili kod yazmak yerine, JQuery' in Ajax işlevlerini kullanarak işlemi daha kolay hale getirebilirsiniz. JQuery' in Ajax işlevleri, XMLHttpRequest nesnesini kullanarak web sayfasında belirli bir bölüme dinamik olarak veri eklemenize veya web sayfasından veri almanıza olanak sağlar.
JQuery Ajax kullanımı oldukça basittir. Ajax isteği göndermek için kullanılan temel yöntemler şunlardır:
- $.ajax()
- $.get()
- $.post()
- $.getJSON()
$.ajax() methodu, Ajax isteklerini özelleştirmek için kullanılır ve web sayfasında tam bir kontrol sağlar. $.get() ve $.post() methodları, veri almak için ve veri göndermek için sırasıyla kullanılır. $.getJSON() methodu ise, verileri JSON formatında bir sunucudan getirmek için kullanılır.
JQuery Ajax kullanımı, önce XMLHttpRequest nesnesinin oluşturulmasını ve isteğin gönderilmesini sağlar. Ardından, sunucunun yanıtını işlemek için bir geri çağrı işlevi belirtilir. Ajax işlevleri genellikle JSON veya XML gibi veri biçimlerinde veri alır ve işlenmesi için sunucuya geri gönderirler.
JQuery Ajax kullanımı hakkında daha fazla bilgi edinerek web sayfanızda dinamik içerikler oluşturma konusunda daha fazla kontrol elde edebilirsiniz.
Filtreleme Uygulama Örneği
Bir web sayfasında veri tabanlı bir tablo varsa, bu tabloda filtreleme yapmak için jQuery kullanabilirsiniz. Öncelikle, tablo üzerinde filtreleme işlemi yapmak için bir işlev yazın. Bu işlev, kullanıcının seçtiği kolona göre tabloyu filtreleyecektir. İşlevi jQuery'in filter() yöntemiyle oluşturabilirsiniz. Bu yöntem, bir dizi elemanı seçer ve belirli bir koşulu sağlayan elemanları döndürür.
| Bölüm | İsim | Yaş |
|---|---|---|
| Bilgisayar Mühendisliği | Ahmet | 25 |
| Makine Mühendisliği | Ali | 30 |
| Elektrik Elektronik Mühendisliği | Ayşe | 28 |
| Bilgisayar Mühendisliği | Mehmet | 27 |
Örneğin, yukarıdaki tabloyu "Bölüm" kolonuna göre filtrelemek istiyorsanız, aşağıdaki kodu kullanabilirsiniz:
$(document).ready(function(){ $("select").change(function(){ var filter = $(this).val(); if(filter == "Bilgisayar Mühendisliği"){ $("table td:nth-child(1)").filter(function(){ return $(this).text() != filter; }).parent().hide(); } else if(filter == "Makine Mühendisliği"){ $("table td:nth-child(1)").filter(function(){ return $(this).text() != filter; }).parent().hide(); } else if(filter == "Elektrik Elektronik Mühendisliği"){ $("table td:nth-child(1)").filter(function(){ return $(this).text() != filter; }).parent().hide(); } else{ $("table tr").show(); } });});Bu kod, bir seçim kutusu oluşturur ve kullanıcının bölümler arasından seçim yapmasına olanak tanır. Seçildiğinde, tablodaki tüm satırları gizleyen if bloğu oluşturulur. Ardından, seçilen bölüme göre tablodaki satırların yeniden gösterilmesi için filter() yöntemi kullanılır.
Liste Filtreleme
Web sayfalarında sıkça kullanılan bir diğer filtreleme yöntemi, listelerdeki öğelerin filtrelenmesidir. Liste öğelerini filtrelemek için jQuery kütüphanesini kullanabilirsiniz. Bu yöntem sayesinde, kullanıcılar liste öğeleri arasında arama yapabilir veya belirli kriterlere göre listeyi filtreleyebilirler.
Liste filtrelemek için jQuery'in filter() yöntemini kullanabilirsiniz. Bu yöntem, belirli bir kriteri karşılamayan öğeleri filtreleyerek sadece aranan öğeleri gösterir. Örneğin, bir menüdeki öğelerin sadece belirli bir kategoriye ait olanları gösterilirken, diğer kategorilere ait olanlar gizlenebilir.
Listelerin filtrelenebilir olması için ilk olarak bir arama kutusu eklemeniz gerekir. Bu arama kutusu kullanıcının filtreleme yapabileceği bir alan sağlar. JQuery ile, arama kutusunu oluşturmak ve filtreleme işlevini çalıştırmak oldukça kolaydır.
Özetle, liste filtreleme işlevi için jQuery kullanabilirsiniz. Liste öğelerini filtrelemek için filter() yöntemini kullanarak belirli kriterlere uygun olan öğeleri göstererek arama işlemini daha kullanıcı dostu hale getirebilirsiniz.
Filtreleme İşlevi Oluşturma
Filtreleme işlemi, bir liste ya da tablodaki öğelerin belirli bir özellik ya da değere göre seçilmesini sağlar. Bu işlemi gerçekleştirmek için jQuery'in filter() yöntemini kullanabilirsiniz. Öncelikle, liste ya da tablonuzu seçin ve filter() yöntemini kullanarak filtreleme işlevi oluşturun. Örneğin, bir tabloda "Ürün Adı" sütununa göre filtreleme yapmak istiyorsanız, aşağıdaki gibi bir kod kullanabilirsiniz:
| Ürün Adı | Fiyat |
|---|---|
| Samsung Galaxy S9 | 4000 TL |
| iPhone X | 5000 TL |
| Sony Xperia XZ2 | 3500 TL |
$(document).ready(function(){
$("input").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
Bu kodda, kullanıcının "Ürün Adı" sütununa girilen değerleri aratması sağlanır. Kullanıcının girdiği değerler, toLowerCase() yöntemi ile küçük harfe çevrilir ve indexOf() yöntemi ile öğeler arasında arama yapılır. Sonuç olarak, sadece girilen değerlere sahip öğeler gösterilir.
Böylece, jQuery'in filter() yöntemini kullanarak kolayca filtreleme işlevi oluşturabilirsiniz. Bu sayede, kullanıcıların istedikleri özelliklere göre liste ya da tabloları filtreleyebilirler.
Arama Çubuğu Ekleme
Kullanıcıların filtreleme yapmak için belirli bir kelimeyi yazabilecekleri bir arama çubuğu eklemek, filtreleme işlemini daha kullanıcı dostu hale getirir. Bu işlemi yapmak için bir HTML formu oluşturun ve içine bir arama çubuğu ekleyin. Ardından, jQuery kullanarak kolayca filtreleme işlevini çalıştırabilirsiniz.
Örneğin, aşağıdaki kodu kullanarak bir HTML formu oluşturabilirsiniz:
<form> <label for="search">Ara:</label> <input type="text" id="search" name="search"> <button type="submit">Ara</button></form>
Bu formu kullanarak bir arama çubuğu oluşturdunuz. Şimdi, jQuery ile işlevi oluşturmanın zamanı geldi. İşlevi aşağıdaki gibi oluşturabilirsiniz:
$(document).ready(function(){ $("#search").on("keyup", function() { var value = $(this).val().toLowerCase(); $("table tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); });});Bu işlev, arama çubuğuna her karakter girildiğinde çalışır ve tablodaki satırları filtreler. İşlev, arama çubuğuna girilen değerin herhangi bir yerinde eşleşen tüm satırları gösterir ve diğerlerini gizler.
Bu işlevi kullanarak filtreyi daha kullanıcı dostu hale getirdiniz ve kullanıcıların belirli öğeleri aramasını kolaylaştırdınız.