ASP.NET MVC'DE DATATABLES BİLEŞENİ VE AJAX SUNUCU TARAFLI SAYFALAMA SERVER SIDE PAGING
Asp.net MVC ile geliştirilen projede Datatables bileşeni kullanarak server side sunucu taraflı sayfalama yaptırmak için aşağıdaki kodlar kullanılabilir.
View tarafı
<table id="dataTablo" class="table table-hover table-checkable dataTable no-footer dtr-inline">
<thead>
<tr>
<th>İşlem</th>
<th>OdaAd</th>
<th>Ad Soyad</th>
<th>Eposta</th>
<th>Telefon</th>
<th>Durum</th>
</tr>
</thead>
</table>
--Jquery ilave edilmelidir
<link href="~/Content/assets/vendors/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css" />
<script src="~/Content/assets/vendors/custom/datatables/datatables.bundle.js" type="text/javascript"></script>
<style type="text/css">
@@media(max-width:670px) {
.table {
display: block;
min-height: 300px;
overflow-x: auto;
width: 100% !important;
}
}
.table > thead > tr > th {
background-color: #f4f3f8;
line-height: 28px;
font-weight: 600;
}
tr:nth-child(even) {
background-color: #faf9fc;
}
.dataTables_filter {
float: left;
margin-bottom: 20px;
}
.dataTables_filter input {
background-color: #f4f5f8;
border-color: #f4f5f8;
color: #575962;
padding: 18px;
width: 272px;
font-size: 13px;
}
.dataTables_paginate {
display:inline-block;
}
.dataTables_length{
float:right;
display:inline-block;
}
.bottom{
margin:34px;
}
</style>
<script type="text/javascript">
var oTable = $('#dataTablo').dataTable({
"dom": '<"top">frt<"bottom">pl<"clear">',
//"dom": '<f<t>pl>',
"processing": true,
"language": {
//"url": "//cdn.datatables.net/plug-ins/1.10.20/i18n/Turkish.json"
"sDecimal": ",",
"sEmptyTable": "Tabloda herhangi bir veri mevcut değil",
"sInfo": "_TOTAL_ kayıttan _START_ - _END_ arasındaki kayıtlar",
"sInfoEmpty": "Kayıt yok",
"sInfoFiltered": "(_MAX_ kayıt içerisinden bulunan)",
"sInfoPostFix": "",
"sInfoThousands": ".",
"sLengthMenu": "Sayfada _MENU_ kayıt göster",
"sLoadingRecords": "Yükleniyor...",
"sProcessing": '<div class="m-loader m-loader--brand" style="width: 30px; display: inline-block;"></div>',
"sSearch": "Ara:",
"sZeroRecords": "Eşleşen kayıt bulunamadı",
"oPaginate": {
"sFirst": "İlk",
"sLast": "Son"
//"sNext": "Sonraki",
//"sPrevious": "Önceki"
},
"oAria": {
"sSortAscending": ": artan sütun sıralamasını aktifleştir",
"sSortDescending": ": azalan sütun sıralamasını aktifleştir"
},
"select": {
"rows": {
"_": "%d kayıt seçildi",
"0": "",
"1": "1 kayıt seçildi"
}
}
},
"bServerSide": true,
"sAjaxSource": "/Uye/UyeListe",
"sServerMethod": "POST",
"aoColumns": [
{ "mData": "IslemText" , "orderable": false },
{ "mData": "Unvan" , "orderable": false },
{ "mData": "AdSoyad" },
{ "mData": "Eposta", "orderable": false },
{ "mData": "TelefonNo", "orderable": false},
{ "mData": "DurumText", "orderable": false}
]
});
</script>
Controller tarafı
public string UyeListe(string sEcho, int iDisplayStart, int iDisplayLength, string sSearch, int iColumns, int iSortingCols, int iSortCol_0, string sSortDir_0, string sColumns)
{
object odaId = null;
if (Convert.ToInt32(Session["KULLANICIROLID"]) >= 4)
{
odaId = Session["KULLANICIODAID"];
}
else
{
odaId = null;
}
var veri = Islem.Uye.Listele(odaId: odaId, durum: 1);
sSearch = sSearch.ToLower();
int totalRecord = veri.Count();
var result = veri;
if (!string.IsNullOrEmpty(sSearch))
{
result = veri.Where(x => x.AdSoyad.ToLower().Contains(sSearch) || x.Eposta.ToLower().Contains(sSearch)).OrderBy(a => a.UyeId).Skip(iDisplayStart).Take(iDisplayLength).ToList();
}
else
{
result = veri.OrderBy(x => x.UyeId).Skip(iDisplayStart).Take(iDisplayLength).ToList();
}
var sortColumnIndex = iSortCol_0;
var sortDirection = sSortDir_0;
if (sortColumnIndex == 2)
{
result = sortDirection == "asc" ? veri.OrderBy(x => x.AdSoyad).Skip(iDisplayStart).Take(iDisplayLength).ToList() : veri.OrderByDescending(x => x.AdSoyad).Skip(iDisplayStart).Take(iDisplayLength).ToList();
}
DataTable dtVeri = Helpers.Araclar.DataTableYap(result);
if (dtVeri != null)
{
for (int i = 0; i < dtVeri.Rows.Count; i++)
{
DataRow dr = dtVeri.Rows[i];
string unvan = dr["Unvan"].ToString();
string dataOdaId = dr["OdaId"].ToString();
string uyeAdSoyad = dr["AdSoyad"].ToString();
string uyeId = dr["UyeId"].ToString();
string durum = "";
string islem = "";
if (Convert.ToInt32(dr["Durum"]) == 1)
{
durum = "<span class=\"m-badge m-badge--brand m-badge--wide\">Aktif</span>";
}
else
{
durum = "<span class=\"m-badge m-badge--danger m-badge--wide\">Pasif</span>";
}
dr["Unvan"] = "<span title=" + unvan + "\" style=\"width: 235px;\"><a href=\"/Oda/Detay/" + dataOdaId + "\" class=\"m-link\">" + unvan + "</a></span>";
dr["AdSoyad"] = "<span title=" + uyeAdSoyad + "\" style=\"width: 235px;\"><a href=\"/Uye/Detay/" + uyeId + "\" class=\"m-link\">" + uyeAdSoyad + "</a></span>";
dr["DurumText"] = durum;
islem += "<span style=\"overflow: visible; position: relative; width: 235px;\">";
islem += "<div class=\"dropdown\" style=\"display:inline-block\">";
islem += "<a href =\"#\" class=\"btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill\" data-toggle=\"dropdown\"><i class=\"la la-ellipsis-h\"></i></a>";
islem += "<div class=\"dropdown-menu dropdown-menu-right\">";
islem += "<a class=\"dropdown-item\" href=\"/Uye/Detay/"+uyeId+"\"><i class=\"la la-arrow-right\"></i>Detayı Gör</a>";
islem += "<a class=\"dropdown-item\" href=\"#\" data-toggle=\"modal\" data-target=\"#m_modal_4Yorum\" onclick=\"UyeNotEkle("+uyeId+");\"><i class=\"la la-comment-o\"></i> Not Ekle </a>";
islem += "<a class=\"dropdown-item\" href=\"#\" data-toggle=\"modal\" data-target=\"#m_modal_4UyeNot\" onclick=\"UyeNotu("+uyeId+");\"><i class=\"la la-comments\"></i> Notu Gör </a>";
islem += "<a class=\"dropdown-item\" href=\"#\" data-toggle=\"modal\" data-target=\"#m_modal_5UyeDosya\" onclick=\"UyeDosya("+uyeId+");\"><i class=\"la la-file-archive-o\"></i>Dosyalar </a>";
islem += "</div>";
islem += "</div>";
islem += "<a href =\"/Uye/Duzenle/"+uyeId+"\" class=\"m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill\" title=\"Düzenle\"><i class=\"la la-edit\"></i></a>";
islem += "</span>";
dr["IslemText"] = islem;
}
}
result = Helpers.Araclar.ListeYap<Uye_Oda>(dtVeri);
StringBuilder sb = new StringBuilder();
sb.Clear();
sb.Append("{");
sb.Append("\"sEcho\": ");
sb.Append(sEcho);
sb.Append(",");
sb.Append("\"iTotalRecords\": ");
sb.Append(totalRecord);
sb.Append(",");
sb.Append("\"iTotalDisplayRecords\": ");
sb.Append(totalRecord);
sb.Append(",");
sb.Append("\"aaData\": ");
sb.Append(JsonConvert.SerializeObject(result));
sb.Append("}");
return sb.ToString();
}