Json Bir Data’yı Javascript İle Programatik Olarak Sıralama

Selamlar;

Bugün client side tarafta jquery post ile çekilen bir Json datayı, istenen kolonlara göre yine client side tarafta nasıl sıralanacağını hep beraber inceleyeceğiz.

Öncelikle bir Mvc projesi yaratıyoruz. Ve sayfa yüklendiğinde listelenecek data’yı çekiyoruz.
Index.cshtml: Aşağıda görüldüğü gibi listelenecek data, sayfa yüklemesi tamamlandığı zaman server side tarafından “GetData()” methodu ile çekilir.

HomeController.cs (GetData): Dummy olarak el ile oluşturulmuş olan data, aşağıda görüldüğü gibi Json olarak döndürülmektedir. Aşağıda dikkat edilmesi gereken bir nokta da “return Json(data,JsonRequestBehavior.AllowGet)” durumunda geri dönüşte “Get” işlemine izin verilmesidir.

Index.cshtml(document.ready()): Aşağıda çekilen Json data tek tek gezilerek “html string” bir “table” oluşturulur. Dikkat edilir ise oluşturulan tablonun header’ında her bir kolon için “onclick()” methodu oluşturulmuş ve tıklanma işleminde “SortTable()” function’ı çağrılmıştır. İlgili function’a parametre olarak bağlandığı kolonun ismi gönderilmiş ve böylece ilgili kolona göre sıralama işlemi yapılması sağlanmıştır. Detay satırlarında gelen Json dataya göre “Yıl”,”Makale” ve “UniqueUser” bilgisi gösterilmektedir. Son olarak herbir kolon başlığının(“.t1 th”) üzerine mouse ile gelindiğinde, tıklanabilirliğini göstermek için ilgili cursor ikonu el işaretine dönüştürülmüştürhand. Sonunda oluşan html table “<div id=”dataTable”></div>” divinin içine basılır.

Index.cshtml (body):

Table

Index.cshtm(style):Oluşturulan tablonun css kodları aşağıdaki gibidir:

SortTable(): Aşağıda görüldüğü gibi ilgili function “type, dataSort” şeklinde 2 parametre almaktadır. “type”, hangi kolona göre sıralama işlemi yapılacağını belirler. “dataSort” ise sırlanacak tüm datayı temsil eder. Gelen data custom yazılmış  olan “SortByColomun()” function’ı ile istenen kolona göre sıralanır. İlgili sıralanmış data tek tek gezilerek, string şeklinde bir “html table” oluşturulup “dataTable” divinin html’ine ezilir. Böylece ilgili kolona göre sıralanan data, table şeklinde ekrana tekrardan basılmış olur.

*SortByColomun(): Sıra geldi bu maklenin esas amacına. Aşağıda gelen “type” parametresine göre “switch-case” yapısı kullanılarak istenilen kolona göre nasıl sıralama yapılacağı gösterilmiştir. İlgili function’ın return tipi “(a,b)” parametresi alan bir başka functiondır. Burada “a,b”, gezilen data içinde bir önceki ve bir sonraki kaydı temsil etmektedir. Belirlenen kolonlara göre önceki ve sonraki kayıtlar “null” ve “undefiend” kontrolünden sonra kıyaslanıp sıralama işlemine tabi tutulur. İstenir ise bu custom sıralama, belirlenen başka koşullar da göz önüne alınarak yapılabilir. Dikkat edilmesi gereken bir başka nokta da “string” kolonlar için örneğin “Makale” kolonu için, önceki ve sonraki string ifadeler “toUpperCase()” ile eşit karakter setine getirilerek kıyaslanmasıdır.

HomeController.cs(Full):

Index.cshtml(Full):

Böyelece client side tarafa gelen Json bir datayı, herhangi bir third party tool kullanmadan istenen kolonlara göre nasıl sıralayacağımızı gördük.

Geldik bir makalenin daha sonuna. Yeni bir makalede görüşmek üzere hoşçakalın.

Herkes Görsün:

Sevebilirsin...

2 Yanıt

  1. binnur kurt dedi ki:

    Sıralama kodunda çok fazla kod tekrarı var. JS nesnesinin özniteliğine [] operatörü ile erişilebilinir. Bu özellik kullanılarak sıralama kodu yalın hale getirilebilinir. Sıralama için aşağıdaki bağlantıdaki kodu inceleyebilirsiniz: http://binkurt.blogspot.com.tr/2015/09/jqueryde-seciciler.html
    Kolay gelsin.

    • borsoft dedi ki:

      Selamlar Binnur;
      Makalenize baktım. Evet kod tekrarı yok. Ama öncelikle indexler ile çalışmışınız. Doğal olarak yeni bir kolon öne veya arkaya gelse kodların komple değişmesi gerekir. Bir de gerçekten anlaşılması çok daha zor. Bazen anlaşılır kod yazmak performansdan daha iyi olabiliyor. Sonuçta Client Side taraflı çalışan bir kod. Tabiki daha da optimize edilebilir. Ama sonuçda bu sınav değil:) gerçek hayat . Sizden sonra biri gelip koda bakınca dağılmasın:)
      Makaleniz ve yazıya desteğiniz için teşekkür ederim..

      Hoşçakalın..

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir