• Anasayfa
  • Hakkımızda
  • Etkinlikler
  • Destek Verin
  • Site Haritası
  • Giriş Yap
  • Üye Ol
  • Facebook
  • Twitter
  • RSS
Yazılım Dilleri
  • Soru - Cevap
  • EĞİTİM SETİ
  • KATEGORİ
  • DUYURU
  • TEKNOLOJİ HABERLERİ

Son Sorular

  • 23.04.2016 00:55:33C programlama 2 oyun
  • 20.04.2016 16:34:41Local Database
  • 15.04.2016 14:26:15Fatura kayıt işlemi
  • 21.03.2016 01:55:30C# problem

Popüler Sorular

  • 27.05.2012 05:49:50Asp.Net ile Date time alana veri ekleyemiiyorum ?
  • 2.04.2012 00:45:18.exe uzantılı dosya için dijital imza nerde nasıl alınır.
  • 12.05.2012 08:44:49Acil Yardım
  • 27.05.2012 13:46:51veri tabanı bağlantısı
  • .Net Framework
  • 8085 Assembly
  • Active Directory
  • ADO.NET
  • Android
  • Apple IOS
  • Arduino
  • ASP.NET
  • ASP.NET MVC
  • Blackberry
  • C#.Net
  • C++
  • CCG Framework
  • CISCO
  • CSS
  • Diğer
  • Dreamweaver
  • Entity Framework
  • Exchange Server
  • Gömülü Sistemler
  • GSM Programlama
  • Güncel
  • Güvenlik
  • HTML5
  • Java
  • Javascript / JQuery
  • Jira
  • Kariyer ve İş Yaşamı
  • LINQ
  • LibreOffice
  • Linux
  • Matlab
  • Microsoft Dynamics CRM
  • Mobil Uygulama Geliştirme
  • MySQL
  • NoSQL
  • Oracle
  • OWIN
  • PFSense
  • PHP
  • Powershell
  • Python
  • Sanallastirma
  • SAP-ABAP
  • SCOM 2012
  • SEO
  • Sharepoint 2010
  • Sharepoint 2013
  • Silverlight
  • Sistem Analiz ve Tasarımı
  • SQL Server
  • Symantec
  • TFS
  • T-SQL
  • Ubuntu
  • VB.NET
  • Veritabanı Yönetim Sistemleri
  • Visual Studio
  • VMware
  • WCF
  • Web Hosting
  • Windows 8
  • Windows Azure
  • Windows Phone 7.1
  • Windows Phone 8
  • Windows Server
  • Wordpress
  • WPF
  • Xamarin
  • XNA
  • Yazılım Mühendisliği
  • Yöneylem Araştırması
  • ASP.NET MVC
  • Entity Framework
  • Javascript / JQuery
  • LINQ
  • PHP

Son Duyurular

IPhone 6 ve IPhone 6 Plus Teknik Özellikleri ve Fiyatı

IPhone 6 ve IPhone 6 Plus Teknik Özellikleri ve Fiyatı

DELL'in Yeni Projesi: USB Bilgisayar (Project Ophelia)

DELL'in Yeni Projesi: USB Bilgisayar (Project Ophelia)

Windows Phone Youtube Uygulaması Google ve Microsoft ile Yeniden Yapılıyor

Windows Phone Youtube Uygulaması Google ve Microsoft ile Yeniden Yapılıyor

Android ve Apple IOS Telefonlar için Blackberry Messenger (BBM)

Android ve Apple IOS Telefonlar için Blackberry Messenger (BBM)

Nokia Lumia 925 Teknik Özellikleri, Lumia 928 ve 920 ile Karşılaştırması

Nokia Lumia 925 Teknik Özellikleri, Lumia 928 ve 920 ile Karşılaştırması

LG Optimus G Pro Özellikleri ve Gözle Video Oynatma Teknolojisi

LG Optimus G Pro Özellikleri ve Gözle Video Oynatma Teknolojisi

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

Yazar: Muhammed ÖNAL (Google+)

Kategori: ASP.NET

12822

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.

Datatable-Jquery örnek

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

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.

Sosyal Medya

ORANLAR

  • 12822izleme

Arkadaşlarınla Paylaş

  • Tweet

1 Yorum

Osman Yılmaz

Osman Yılmaz

02.02.2017

Hocam Link başka sayfaya yönlendiriyor.

Yorum Yaz / Soru Sor

Lütfen yorum yazmak veya soru sormak için üye girişi yapınız.

Son Yorumlar

  • Böyle bir sayfalama ağ trafiğini hafifleti...
  • Merhaba, ellerinize sağlık çok yardımcı ol...
  • Merhaba Bu uygulama örneğinden ASP.net ...
  • Hocam Link başka sayfaya yönlendiriyor.
  • merhaba benim merak ettiğim bir konu var y...

En Güncel Sorular

  • Bilgilendirme maili (C#.Net)
  • Power Pivot (Sharepoint 2010)
  • BigInteger, BigDecimal (Asp.Net ve Asp.Net MVC)
  • visual C# ile asp nette veritabanı islemleri (Asp.Net ve Asp.Net MVC)
  • Share Point ile Dosya Arşiv Yönetim Sistemi yapılabilir mi ? (Sharepoint 2010)

En Son Cevap Verilen Sorular

  • Bilgilendirme maili
  • BigInteger, BigDecimal
  • visual C# ile asp nette veritabanı islemleri
  • Share Point ile Dosya Arşiv Yönetim Sistemi yapılabilir mi ?
  • txt dosyasına veri yazma

Twitter

Takip et: @yazilim_dilleri

En Çok Okunanlar

Elif BAYRAKDAR

C# ile SQL Server Bağlantısı, Insert, Update ve Delete Sorguları

23.05.2013

  • 122147
  • 0
Hakan Keskin

C# ile Windows Service Projesi Oluşturma, Debug Etme ve Setup Hazırlama

17.12.2013

  • 68381
  • 0
batuhan avlayan

Php - Mail Gönderme (İletişim Formu)

02.09.2013

  • 50021
  • 0

Sponsorlar

KODLAB
Pluralsight
Exchange server is
Office 365
YAZILIM DİLLERİ
Yukarı Çık
  • Hakkımızda
  • Facebook
  • Twitter
  • RSS

© Yazılım Dillerinin Buluşma Noktası | Kaynak belirtildiği sürece makaleler kopyalanabilir.
YazilimDilleri.Net sitesinde yer alan kullanıcıların oluşturduğu tüm içeriklerin yayınlanması ile ilgili yasal yükümlülükler içeriği oluşturan kullanıcıya aittir, YazilimDilleri.Net hiçbir şekilde sorumlu değildir.

Kapat

Giriş Yap

Kullanıcı Adı

Şifre

Şifremi Unuttum

KULLANICI GİRİŞİ