ASP.NET WEB UYGULAMALARINDA JQUERY DATATABLE KULLANMAK

Asp.Net Web Uygulamalarında Jquery kütüphanesinin Datatable kullanımına ilişkin örnek bir uygulama geliştireceğiz.

21.12.2013

14612

ASP.NET WEB UYGULAMALARINDA JQUERY DATATABLE KULLANMAK

ASP.NET Web uygulamalarında JQuery Kütüphanesine ait Data Table kullanımına örnek bir proje ile teknik yazımıza başlayalım.

JQuery’i kütüphanesinin geliştirilmesi ile birlikte Web uygulamalarımıza daha görsel görünümler sağlayarak hem son kullanıcıya efektif bir görsellik sunmamızı hem de teknik anlamda web site programcısını oldukça zahmetli kodlar yazmaktan kurtardığı aşikârdır. Bu nedenle ASP.Net web uygulamalarımızda belki yüzlerce satır yazacağımız kodlarımızı Jquery’i kütüphanesini kullanarak hem kodlarımızı azaltmış oluruz hem de uygulamamızın okunabilirliğini arttırmış oluruz.

Peki, Ama nasıl? Bu sorumuza cevabımızı elbette yapacağımız örnek uygulama vasıtasıyla vermiş olacağım. Bunun öncesinde şunu ifade etmekte fayda olduğunu düşünmekteyim. Herhangi bir web site template’in de özelliklede Admin Template’ler de Datatable ile ilgili tasarımları görmek mümkündür.

Örneğin; Aşağıdaki Örnek Template’de ilgili Datatable tasarımını görebilirsiniz. ( Bu template indirmek için sayfa sonunda Download seçeneğini kullanarak indirmeniz mümkündür.

Yukarıda ekran görüntüsünü gördüğümüz ilgili template de datatable tasarımını görebiliriz. Biz uygulamamızı geliştirirken bu tasarımı referans olarak alıp, ASP.NET web uygulamamızın Design ve Code Behind kodlarına gömerek kodlamamızı gerçekleştireceğiz.

(NOT: Bu tasarımın dışında başka Templateler de kullanmanız mümkündür, yöntem aynıdır.)

Haydi, başlayalım o zaman;

Yine teknik makalemizin sonunda Jquery Kütüphanesinin Datatable script dosyalarını bulmanız mümkündür.

ASP.NET sayfanızda masterpage kullandığınızı varsayarak işlemlerimizi yapmaya başlayalım.

Site.master sayfanızın design tarafında

<head runat="server">

</head>

tagları arasında ilgili Jquery Script dosyalarını referans yollarını göstereceğiz.

Solution Explorer’da jscript klasöründe bulunan diğer js uzantılı dosyaları da görebilirsiniz

Jquery.dataTables.min.js dosyamızın konumu da şekilde ki gibidir.

<head runat="server">
   <title>Sayfa Başlığı </title>
    
   <link rel="stylesheet" href="intCSS/style.default.css" type="text/css" />
     <link rel="stylesheet" href="intCSS/Style.css" type="text/css" />
     <link rel="stylesheet" href="prettify/prettify.css" type="text/css" />
     <link rel="stylesheet" href="intCSS/jquery.ui.css" type="text/css" />

     <!- - Diğer JS Dosyaları Buraya - - >
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>

   <script type="text/javascript" src="jscript/jquery.dataTables.min.js"></script>
   <script type="text/javascript" src="js/responsive-tables.js"></script>

     <script type="text/javascript">
        jQuery(document).ready(function () {
            // dynamic table
            jQuery('#dyntable').dataTable({
                "sPaginationType": "full_numbers",
                //"aaSortingFixed": [[0, 'asc']],
                "fnDrawCallback": function (oSettings) {
                    jQuery.uniform.update();
                }
            });
        });
   </script>
</head>

İlgili JS dosyalarımızın yolunu gösterdikten sonra uygulamamıza geçebiliriz.

UYGULAMA:

Kurumsal Şirketiniz için bir INTRANET projesi yaptığınızı düşününüz. Şirket içinde birimlerin birbiriyle haberleşmesini sağlamaları açısından Dahili telefon numaraların yer aldığı bir Rehber sayfası hazırlamak gerektiğini düşününüz. Bu rehber sayfasında ilgili kişinin Görevi/Pozisyonu/Birimi , İsmi ve Soy ismi bunun yanında dahili telefon numarasıyla birlikte , kurum içi kullanılan kurumsal hattına ait kısa kod’unun yer aldığı bir sayfa tasarlayalım.

İlgi Sayfamıza ait sütunların yer alacağı şeklimiz aşağıdaki gibi olsun istiyoruz:

İlgili veri tabanımızı ait sütunları oluşturalım;

dbo.Rehber

SQL server tarafında design kısmını oluşturduktan sonra Properties penceresinden Identity Column özelliği PersonelId olmalıdır.

Rehber.aspx sayfamıza ait kodlarımız

<div class="maincontent">
<div class="maincontentinner">

           <asp:Repeater ID="RptRehber" runat="server">
           <HeaderTemplate>

           <h4 class="widgettitle">ŞİRKET REHBERİ</h4>
           <table id="dyntable" class="table table-bordered responsive">
              <colgroup>
                        
                        <col class="con1" />
                        <col class="con0" />
                        <col class="con1" />
                        <col class="con0" />
                        <col class="con1" />
              </colgroup>
              <thead>
                        <tr>
                          	
                            <th class="head0">PERSONEL ADI</th>
                            <th class="head1">GÖREV/POZİSYON/BİRİMİ</th>
                            <th class="head0">DAHİLİ(MASA)TEL</th>
                            <th class="head1">KISA KOD CEP</th>
                            <th class="head0">HARİCİ KOD CEP</th>
                            
                        </tr>

             </thead>

            </HeaderTemplate>
             <ItemTemplate>
                   
             <tr class="gradeX">
                            
             <td><%#Eval("PersonelAd") %> <%#Eval("PersonelSoyAd") %></td>
             <td><%#Eval("Meslek") %></td>
             <td><%#Eval("Tel1Dahili") %></td>
             <td><%#Eval("Tel2KisaKod") %></td>
             <td><%#Eval("Tel3Harici") %></td>
             </tr>
             </ItemTemplate>
           <FooterTemplate>
         </table>
       </FooterTemplate>
     </asp:Repeater>   
  </div>
 </div>

Yukarıdaki gibi ilgili CSS sınıflarını makale sonunda download edeceğiniz template içerisinde bulmanız mümkündür.

Burada Rehber.aspx sayfamızda ID’si RptRehber olan bir Repeater kullanmış olduk.

İlgili Sütunlarımızı veritabanından çekmek için EVAL metoduyla birlikte belirttikten sonra Code Behind tarafındaki kodlamamıza geçmemiz mümkündür.

Rehber.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
   RptRehber.DataSource = datalistDoldur.DataTableAl("SELECT * FROM Rehber");
   RptRehber.DataBind();

}

Burada hemen belirtmekte fayda var bazı arkadaşlarımız hemen şunu soracaklardır; datalistDoldur.DataTableAl metodunu nasıl yapacağız?

datalistDoldur.cs adında bir Classımız var bu sınıfımızı aşağıdaki gibi oluşturabiliriz.

static public DataTable DataTableAl(string sqlcumle)
{
        if (baglan.baglanti.State == ConnectionState.Closed)
        {
            baglan.baglanti.Open();
        }

        SqlDataAdapter adap = new SqlDataAdapter(sqlcumle, baglan.baglanti);
        DataTable dt = new DataTable();
        adap.Fill(dt);

        return dt;
}

Şeklinde kodlarımızı yazabiliriz. İlgili Baglan.cs sınıfımızı sizlerde ConnectionString’i yazarak belirtebilirsiniz.

Ekran Görüntümüz aşağıdaki gibidir:
Uygulamaya baktığımızda Arama Textbox’ın da herhangi bir sütun için arama yaptığımızda (ister personel adına göre, ister görev/pozisyonuna göre, ister telefon numaralarına göre arama yapın, tüm sonuçlar size doğru olarak verilecektir.) bulunan sonuçlar listelenirken, bulunamayan sonuçlar için ise herhangi bir sonuç bulunamadı eşleştirmesini yapacaktır.

Datatable üzerinde ki Türkçe yapıları jquery.dataTables.min.js dosyası içinden düzenleyebilirsiniz.

Örneğin;

Şeklinde Türkçeleştirebilirsiniz.

jquery.dataTables.min.js JS dosyasında;

Ayrıca, varsayılan kayıt sayısının kaç tane olarak geldiğini göstermek için aşağıdaki metot üzerinde iDisplayLength:300 olarak belirttik;

Gösterilecek kayıt sayısının Dropdown listteki sayıyı belirlemek için ise aLengthMenu nesnesi vasıtasıyla

Aşağıdaki gibi istediğiniz şekilde belirtebilirsiniz.

PROJE TEMPLATE İNDİRMEK İÇİN TIKLAYINIZ

JQUERY dataTABLE Dosyaları İndirmek için Tıklayınız

Bir sonraki makalemiz yine JQuery kütüphanesine ait dataTables JS üzerinde Drop Down Row ( Satırı Sürükle Bırak ) metodunu görmeye çalışacağız.

Faydalı olmasını temenni ederim.

İyi çalışmalar

Muhammed ÖNAL
Bilgisayar Mühendisi
RFID Sistemleri Uzmanı
BT Yönetişimcisi

Blog: http://www.muhammedonal.com
Web : http://www.yazilimdilleri.net

Yazar Hakkında

Muhammed ÖNAL

www.muhammedonal.com

Bilgisayar Mühendisi | RFID Sistemleri Uzmanı | BT Yönetişimcisi | Strateji Planlama ve İş Geliştirme 2015 itibariyle sağlık sektöründe Bilgi Sistemleri Yöneticisi ve Üst yönetim Stratejik Planlama ve İş Geliştirme Koordinatörü pozisyonunda çalışmaktadır.

Yazar Hakkında

Sosyal Medya

1 Yorum

Yorum Yaz / Soru Sor

Son Yorumlar

En Güncel Sorular

En Son Cevap Verilen Sorular

Twitter

En Çok Okunanlar

Sponsorlar