BAĞLANTILARIM

Takip Edin:

0

ASP.NET MVC'DE DATATABLES BİLEŞENİ VE AJAX SUNUCU TARAFLI SAYFALAMA SERVER SIDE PAGING

Perşembe, Ekim 18, 2018 / / , , , , ,

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();
        }

0 yorum

SON YORUMLAR