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.
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function () { $.getJSON("/Home/GetData").done(function (data) { jsonObject = JSON.parse(data); }); }); </script> |
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.
|
1 2 3 4 5 |
public JsonResult GetData() { var data= "[{\"Yıl\":2014,\"data\":[{\"Makale\":\"Mvc Nedir?\",\"UniqueUser\":45683}]},{\"Yıl\":2014,\"data\":[{\"Makale\":\"Html Tag Cache\",\"UniqueUser\":44385}]},{\"Yıl\":2015,\"data\":[{\"Makale\":\"Multi Upload Files\",\"UniqueUser\":62345}]},{\"Yıl\":2015,\"data\":[{\"Makale\":\"Node Js\",\"UniqueUser\":112000}]},{\"Yıl\":2014,\"data\":[{\"Makale\":\"Iframe Nedir\",\"UniqueUser\":57245}]},{\"Yıl\":2014,\"data\":[{\"Makale\":\"SignalR Nedir\",\"UniqueUser\":157815}]},{\"Yıl\":2015,\"data\":[{\"Makale\":\"AngularJS Nedir\",\"UniqueUser\":95683}]},{\"Yıl\":2014,\"data\":[{\"Makale\":\"KnockoutJS Nedir\",\"UniqueUser\":67341}]},{\"Yıl\":2015,\"data\":[{\"Makale\":\"Jquery Sort\",\"UniqueUser\":25000}]},{\"Yıl\":2015,\"data\":[{\"Makale\":\"Ses Teknlojileri\",\"UniqueUser\":43768}]}]"; return Json(data,JsonRequestBehavior.AllowGet); } |
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ür
. Sonunda oluşan html table “<div id=”dataTable”></div>” divinin içine basılır.|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(document).ready(function () { $.getJSON("/Home/GetData").done(function (data) { jsonObject = JSON.parse(data); var html = '<table class="t1">' + '<tfoot><tr><th colspan="3"><a href="http://www.borakasmer.com" target=blank>www.borakasmer.com</a></th></tr></tfoot>' + '<thead><tr><th onclick="SortTable(\'Year\',jsonObject)">Yıl</th><th onclick="SortTable(\'Name\',jsonObject)">Makale Adı</th><th onclick="SortTable(\'User\',jsonObject)">Tekil Kullanıcı</th></tr></thead>'; for (i = 0; i < jsonObject.length; i++) { html += '<tr><td>' + jsonObject[i].Yıl + '</td><td>' + jsonObject[i].data[0].Makale + '</td><td>' + jsonObject[i].data[0].UniqueUser + '</td></tr>'; } html += '</table>'; $('#dataTable').append(html); $(".t1 th").hover(function () { $(this).css('cursor', 'pointer'); }, function () { $(this).css('cursor', 'auto'); }); }); }); |
Index.cshtml (body):
|
1 2 3 4 5 |
<body style="background-image: url('/jGlzr.png');"> <div> <div id="dataTable"></div> </div> </body> |
Index.cshtm(style):Oluşturulan tablonun css kodları aşağıdaki gibidir:
|
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 |
<style type="text/css"> table.t1 { margin: 1em auto; border-collapse: collapse; font-family: Arial, Helvetica, sans-serif; } .t1 th, .t1 td { padding: 4px 8px; } .t1 thead th { background: #4f81bd; text-align: left; font-size: 20px; color: #fff; } .t1 tr { border-right: 1px solid #95b3d7; } .t1 tbody tr { border-bottom: 1px solid #95b3d7; } .t1 tbody tr:nth-child(odd) { background: #dbe5f0; } .t1 tbody th, .t1 tbody tr:nth-child(even) td { border-right: 1px solid #95b3d7; } .t1 tfoot th { background: #4f81bd; text-align: left; font-weight: normal; font-size: 15px; color: #fff; } .t1 tfoot th a { text-decoration: none; color: white; } .t1 tr *:nth-child(3), .t1 tr *:nth-child(4) { text-align: center; } </style> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function SortTable(type, dataSort) { dataSort.sort(SortByColomun(type)); var html = '<table class="t1">' + '<tfoot><tr><th colspan="3"><a href="http://www.borakasmer.com" target=blank>www.borakasmer.com</a></th></tr></tfoot>' + '<thead><tr><th onclick="SortTable(\'Year\',jsonObject)">Yıl</th><th onclick="SortTable(\'Name\',jsonObject)">Makale Adı</th><th onclick="SortTable(\'User\',jsonObject)">Tekil Okuyucu</th></tr></thead>'; for (i = 0; i < dataSort.length; i++) { html += '<tr><td>' + dataSort[i].Yıl + '</td><td>' + dataSort[i].data[0].Makale + '</td><td>' + dataSort[i].data[0].UniqueUser + '</td></tr>'; } html += '</table>'; $('#dataTable').html(html); $(".t1 th").hover(function () { $(this).css('cursor', 'pointer'); }, function () { $(this).css('cursor', 'auto'); }); } |
*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.
|
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 |
function SortByColomun(type) { return function (a, b) { switch (type) { case 'Year': { if (b.Yıl != null && b.Yıl != undefined && a.Yıl != null && a.Yıl != undefined) { var First = a.Yıl; var Second = b.Yıl; return ((First < Second) ? -1 : ((First > Second) ? 1 : 0)); } break; } case 'Name': { if (b.data[0].Makale != null && b.data[0].Makale != undefined && a.data[0].Makale != null && a.data[0].Makale != undefined) { var First = a.data[0].Makale.toString().toUpperCase(); var Second = b.data[0].Makale.toString().toUpperCase(); return ((First < Second) ? -1 : ((First > Second) ? 1 : 0)); } } break; case 'User': { if (b.data[0].UniqueUser != null && b.data[0].UniqueUser != undefined && a.data[0].UniqueUser != null && a.data[0].UniqueUser != undefined) { var First = a.data[0].UniqueUser; var Second = b.data[0].UniqueUser; return ((First < Second) ? -1 : ((First > Second) ? 1 : 0)); } } break; } } } |
HomeController.cs(Full):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace SortJquery.Controllers { public class HomeController : Controller { // GET: Home public ActionResult Index() { return View(); } public JsonResult GetData() { var data= "[{\"Yıl\":2014,\"data\":[{\"Makale\":\"Mvc Nedir?\",\"UniqueUser\":45683}]},{\"Yıl\":2014,\"data\":[{\"Makale\":\"Html Tag Cache\",\"UniqueUser\":44385}]},{\"Yıl\":2015,\"data\":[{\"Makale\":\"Multi Upload Files\",\"UniqueUser\":62345}]},{\"Yıl\":2015,\"data\":[{\"Makale\":\"Node Js\",\"UniqueUser\":112000}]},{\"Yıl\":2014,\"data\":[{\"Makale\":\"Iframe Nedir\",\"UniqueUser\":57245}]},{\"Yıl\":2014,\"data\":[{\"Makale\":\"SignalR Nedir\",\"UniqueUser\":157815}]},{\"Yıl\":2015,\"data\":[{\"Makale\":\"AngularJS Nedir\",\"UniqueUser\":95683}]},{\"Yıl\":2014,\"data\":[{\"Makale\":\"KnockoutJS Nedir\",\"UniqueUser\":67341}]},{\"Yıl\":2015,\"data\":[{\"Makale\":\"Jquery Sort\",\"UniqueUser\":25000}]},{\"Yıl\":2015,\"data\":[{\"Makale\":\"Ses Teknlojileri\",\"UniqueUser\":43768}]}]"; return Json(data,JsonRequestBehavior.AllowGet); } } } |
Index.cshtml(Full):
|
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 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 |
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scripts/jquery-2.1.4.min.js"></script> <style type="text/css"> table.t1 { margin: 1em auto; border-collapse: collapse; font-family: Arial, Helvetica, sans-serif; } .t1 th, .t1 td { padding: 4px 8px; } .t1 thead th { background: #4f81bd; text-align: left; font-size: 20px; color: #fff; } .t1 tr { border-right: 1px solid #95b3d7; } .t1 tbody tr { border-bottom: 1px solid #95b3d7; } .t1 tbody tr:nth-child(odd) { background: #dbe5f0; } .t1 tbody th, .t1 tbody tr:nth-child(even) td { border-right: 1px solid #95b3d7; } .t1 tfoot th { background: #4f81bd; text-align: left; font-weight: normal; font-size: 15px; color: #fff; } .t1 tfoot th a { text-decoration: none; color: white; } .t1 tr *:nth-child(3), .t1 tr *:nth-child(4) { text-align: center; } </style> <script> $(document).ready(function () { $.getJSON("/Home/GetData").done(function (data) { jsonObject = JSON.parse(data); var html = '<table class="t1">' + '<tfoot><tr><th colspan="3"><a href="http://www.borakasmer.com" target=blank>www.borakasmer.com</a></th></tr></tfoot>' + '<thead><tr><th onclick="SortTable(\'Year\',jsonObject)">Yıl</th><th onclick="SortTable(\'Name\',jsonObject)">Makale Adı</th><th onclick="SortTable(\'User\',jsonObject)">Tekil Kullanıcı</th></tr></thead>'; for (i = 0; i < jsonObject.length; i++) { html += '<tr><td>' + jsonObject[i].Yıl + '</td><td>' + jsonObject[i].data[0].Makale + '</td><td>' + jsonObject[i].data[0].UniqueUser + '</td></tr>'; } html += '</table>'; $('#dataTable').append(html); $(".t1 th").hover(function () { $(this).css('cursor', 'pointer'); }, function () { $(this).css('cursor', 'auto'); }); }); }); function SortTable(type, dataSort) { dataSort.sort(SortByColomun(type)); var html = '<table class="t1">' + '<tfoot><tr><th colspan="3"><a href="http://www.borakasmer.com" target=blank>www.borakasmer.com</a></th></tr></tfoot>' + '<thead><tr><th onclick="SortTable(\'Year\',jsonObject)">Yıl</th><th onclick="SortTable(\'Name\',jsonObject)">Makale Adı</th><th onclick="SortTable(\'User\',jsonObject)">Tekil Okuyucu</th></tr></thead>'; for (i = 0; i < dataSort.length; i++) { html += '<tr><td>' + dataSort[i].Yıl + '</td><td>' + dataSort[i].data[0].Makale + '</td><td>' + dataSort[i].data[0].UniqueUser + '</td></tr>'; } html += '</table>'; $('#dataTable').html(html); $(".t1 th").hover(function () { $(this).css('cursor', 'pointer'); }, function () { $(this).css('cursor', 'auto'); }); } function SortByColomun(type) { return function (a, b) { switch (type) { case 'Year': { if (b.Yıl != null && b.Yıl != undefined && a.Yıl != null && a.Yıl != undefined) { var First = a.Yıl; var Second = b.Yıl; return ((First < Second) ? -1 : ((First > Second) ? 1 : 0)); } break; } case 'Name': { if (b.data[0].Makale != null && b.data[0].Makale != undefined && a.data[0].Makale != null && a.data[0].Makale != undefined) { var First = a.data[0].Makale.toString().toUpperCase(); var Second = b.data[0].Makale.toString().toUpperCase(); return ((First < Second) ? -1 : ((First > Second) ? 1 : 0)); } } break; case 'User': { if (b.data[0].UniqueUser != null && b.data[0].UniqueUser != undefined && a.data[0].UniqueUser != null && a.data[0].UniqueUser != undefined) { var First = a.data[0].UniqueUser; var Second = b.data[0].UniqueUser; return ((First < Second) ? -1 : ((First > Second) ? 1 : 0)); } } break; } } } </script> </head> <body style="background-image: url('/jGlzr.png');"> <div> <div id="dataTable"></div> </div> </body> </html> |
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.
Source:
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.
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..