ASP.NET MVC uygulamalarında yaygın olarak kullanılan bir grid var: DataTables. Bu grid normal bir tabloyu; arama, sıralama, sayfalama özellikleri bulunan jQuery ve AJAX ile çalışan responsive olabilen dinamik bir gride dönüştürüyor.
Kullanmak için jQuery DataTables’in javascript ve css dosyasını HTML sayfamıza eklemek ve konfigürasyonlarını yapmak gerekiyor.
Şimdi size geçen günlerde hazırladığım http://cvhavuzu.bilisimegitim.com adresinde yayınladığımız DataTables uygulamasını hazırlanışını tarif edeceğim.
Öncelikle sayfamıza jQuery’i eklemiş olmamız gerekiyor. jQuery eklendikten sonra sayfamıza jQuery DataTables plugin’i için aşağıdaki dosyaları ekliyoruz. (İndirip projemize ekleyebilir veya aşağıda olduğu gibi doğrudan CDN’den kullanabiliriz.)
<a href="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js">//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js</a> <a href="//cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.min.js">//cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.min.js</a>
Responsive özellikler eklemek için sondaki dataTables.responsive.min.js dosyasını ekleyebilirsiniz.
Sonra HTML’de tablomuzu oluşturalım. Tablomuzda belirlediğimiz sütun isimleri grid’imizdeki sütun isimleri oluyor:
<table id="myDataTable" class="display"> <thead> <tr> <th class="all">No</th> <th class="all">Ad Soyad</th> <th class="desktop">Cinsiyet</th> <th class="desktop">Uzmanlık</th> <th class="none">Notlar</th> <th class="desktop">Üniversite</th> <th class="desktop">Bölüm</th> <th class="desktop">Doğum Tarihi</th> <th class="desktop">Lokasyon</th> <th class="desktop">CV</th> </tr> </thead> </table>
Buradaki th etiketlerindeki css class’ları ile sütunların responsive olması sağlanabiliyor. all class’ı mobil ve desktop ekranların tümünde görünmesi için. desktop class’ı o sütun sadece masaüstü tarayıcılarda açık olarak görünsün, mobilde gizlensin. none ise her zaman gizli olsun demek. Gizli sütunlara soldaki + ikonuna tıklayarak ulaşabiliyoruz. Bu class’lar ile gridimizi her türlü ekrana sığacak şekilde tasarlayabiliyoruz.
Şimdi sırada JavaScript ile DataTables pluginimizi etkinleştirip konfigüre etmek var. DataTables script dosyalarını eklediğimiz satırın aşağısına aşağıdaki satırları yapıştırabilirsiniz:
$(document).ready(function () {
$("#myDataTable").DataTable({
responsive: true,
"aLengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
iDisplayLength: 10,
"oLanguage": {
"sZeroRecords": "Arama kriterinizle eşleşen kayıt yok.",
"sLengthMenu": "Sayfa başına _MENU_ kayıt göster",
"sInfo": "_TOTAL_ kaydın _START_ ile _END_ arası gösteriliyor ",
"sInfoEmpty": "0 kaydın 0 ile 0 arası gösteriliyor",
"sInfoFiltered": "(_MAX_ toplam kayıttan filtrelendi)",
"sSearch": "Ara:",
"oPaginate": {
"sPrevious": "Önceki",
"sNext": "Sonraki",
"sFirst": "İlk",
"sLast": "Son"
},
"sProcessing": "Yükleniyor..."
},
sPaginationType: "full_numbers",
"bServerSide": true,
"sAjaxSource": "/Home/AjaxHandler",
"bProcessing": true,
"aoColumns": [
{ "sName": "CVId"},
{ "sName": "FullName" },
{ "sName": "Gender" },
{ "sName": "ExpertiseName" },
{ "sName": "Notes" },
{ "sName": "University" },
{ "sName": "Department" },
{ "sName": "BirthDate" },
{ "sName": "Location" },
{
"sName": "CVFile",
"bSearchable": false,
"bSortable": false,
"mRender" : function ( data, type, row ) {
return '<a href="/CVler/' + data + '" target="_blank" rel="noopener noreferrer">İndir</a>';
}
}
]
});
});
Bu arada id’isni verdiğimiz HTML tablomuzu belirttiğimiz yapılandırmaya göre DataTables’a dönüştürüyoruz. DataTables’taki metinlerin Türkçe karşılıklarını yazıyoruz. Sütunları ve özelliklerini tanımlıyoruz. sAjaxSource parametresi ile de MVC Controller’da JSON döndüren bir action’ın adresini belirtiyoruz. Bu adresten gridimizin içeriği yüklenecek.
Şimdi grid’imizin verilerini arama, sıralama ve sayfalama işlemlerini yaparak JSON olarak döndüren Home controllerımızdaki AjaxHandler action’ınımızın içeriğini yazalım:
public ActionResult AjaxHandler(jQueryDataTableParamModel param)
{
string sSearch = "";
if (param.sSearch != null) sSearch = param.sSearch;
var allCVs = new CVService().GetAll(sSearch);
IEnumerable filteredCVs = allCVs;
var sortColumnIndex = Convert.ToInt32(Request["iSortCol_0"]);
var sortDirection = Request["sSortDir_0"]; // asc or desc
if (sortDirection == "asc") {
switch (sortColumnIndex)
{
case 0:
filteredCVs = filteredCVs.OrderBy(c => c.CVId);
break;
case 1:
filteredCVs = filteredCVs.OrderBy(c => c.FirstName).ThenBy(c => c.LastName);
break;
case 2:
filteredCVs = filteredCVs.OrderBy(c => c.Gender);
break;
case 3:
filteredCVs = filteredCVs.OrderBy(c => c.Expertise.ExpertiseName);
break;
case 4:
filteredCVs = filteredCVs.OrderBy(c => c.Notes);
break;
case 5:
filteredCVs = filteredCVs.OrderBy(c => (c.University != null) ? c.University.UniversityName : String.Empty);
break;
case 6:
filteredCVs = filteredCVs.OrderBy(c => (c.Department != null) ? c.Department.DepartmentName : String.Empty);
break;
case 7:
filteredCVs = filteredCVs.OrderBy(c => c.BirthDate);
break;
case 8:
filteredCVs = filteredCVs.OrderBy(c => c.Location);
break;
default:
filteredCVs = filteredCVs.OrderBy(c => c.CVId);
break;
}
}
else
{
switch (sortColumnIndex)
{
case 0:
filteredCVs = filteredCVs.OrderByDescending(c => c.CVId);
break;
case 1:
filteredCVs = filteredCVs.OrderByDescending(c => c.FirstName).ThenByDescending(c=>c.LastName);
break;
case 2:
filteredCVs = filteredCVs.OrderByDescending(c => c.Gender);
break;
case 3:
filteredCVs = filteredCVs.OrderByDescending(c => c.Expertise.ExpertiseName);
break;
case 4:
filteredCVs = filteredCVs.OrderByDescending(c => c.Notes);
break;
case 5:
filteredCVs = filteredCVs.OrderByDescending(c => (c.University != null) ? c.University.UniversityName : String.Empty);
break;
case 6:
filteredCVs = filteredCVs.OrderByDescending(c => (c.Department != null) ? c.Department.DepartmentName : String.Empty);
break;
case 7:
filteredCVs = filteredCVs.OrderByDescending(c => c.BirthDate);
break;
case 8:
filteredCVs = filteredCVs.OrderByDescending(c => c.Location);
break;
default:
filteredCVs = filteredCVs.OrderByDescending(c => c.CVId);
break;
}
}
var displayedCVs = filteredCVs.Skip(param.iDisplayStart).Take(param.iDisplayLength);
var result = from c in displayedCVs
select new[] { Convert.ToString(c.CVId), c.FirstName + " " + c.LastName, c.Gender.ToString(), c.Expertise.ExpertiseName, c.Notes ?? string.Empty, (c.University!=null?c.University.UniversityName:string.Empty), (c.Department!=null? c.Department.DepartmentName:string.Empty), (c.BirthDate.HasValue ? c.BirthDate.Value.ToString("YYYY"):String.Empty), c.Location ?? string.Empty, c.CVFile };
return Json(new
{
sEcho = param.sEcho,
iTotalRecords = allCVs.Count(),
iTotalDisplayRecords = filteredCVs.Count(),
aaData = result
},
JsonRequestBehavior.AllowGet);
}
}
CVService’ten kayıtları getirken sSearch te bulunana kelime ya da kelimeleri entity’lerimizin alanlarında Linq Where kullanarak kontrol ediyoruz. Yukarıdaki kodlar sıralama, sayfalama yaptıktan sonra JSON çıktı döndürüyor.
Son olarak jQueryDataTableParamModel yardımcı class’ımızın içeriğini de paylaşalım:
public class jQueryDataTableParamModel
{
///
/// Request sequence number sent by DataTable,
/// same value must be returned in response
/// </code>
public string sEcho { get; set; }
<code></code>
///
/// Text used for filtering
///
public string sSearch { get; set; }
///
/// Number of records that should be shown in table
///
public int iDisplayLength { get; set; }
///
/// First record that should be shown(used for paging)
///
public int iDisplayStart { get; set; }
///
/// Number of columns in table
///
public int iColumns { get; set; }
///
/// Number of columns that are used in sorting
///
public int iSortingCols { get; set; }
///
/// Comma separated list of column names
///
public string sColumns { get; set; }
}
İşte bu kadar. Mutlu kodlamalar!
Murat Demirci 