mehmetduran.com - Paylaşmak Güzeldir...
Jquery ve Ajax ile Dataları Sayfalama İşlemi
Bu yazımda jquery ve ajax ile verileri nasıl sayfalayabileceğimizi göstereceğim. Bu örnekle beraber jquery ve ajax uygulamalarında url verisinde parametre kullanmayı göreceğiz. Zira sayfalama işleminde de bu parametre olayını kullanacağız. Parametre ile tıpkı Querystring mantığı ile çalışacağız. Sayfa bilgilerini bu parametre ile alıp datalarımızı çekeceğiz. Bunun için kodlarımıza bakacak olursak:

Sayfamızın arka planında kullancağımız kodlar şöyle olacak:

    OleDbConnection baglanti;
    protected override void OnLoad(EventArgs e)
    {
        baglanti = new OleDbConnection("provider=microsoft.jet.oledb.4.0; data source=" + Server.MapPath("~/isimler2.mdb"));
        OleDbCommand komut = new OleDbCommand("select count(*) from isimler", baglanti);
        baglanti.Open();
        int data_sayisi = (int)komut.ExecuteScalar();
        baglanti.Close();
        linkler.InnerHtml = linkleri_al(data_sayisi);
        base.OnLoad(e);
    }
 
    public string linkleri_al(int adet)
    {
        string sonuc = "";
        if (adet % sayfalama_adeti == 0) { adet = adet / sayfalama_adeti; }
        else if (adet % sayfalama_adeti != 0) { adet = ((adet / sayfalama_adeti) + 1); }
        for (int i = 1; i <= adet; i++)
        {
            sonuc += "<a class='link' onclick='al(" + i + ")'></a>"
        }
        return sonuc;
    }
 
    public int sayfalama_adeti = 4; // sayfalama adeti
 
    [System.Web.Services.WebMethod]
    public static string getir()
    {
        int sayfalama_adeti = 4; // sayfalama adeti
 
        string url = HttpContext.Current.Request.RawUrl;
        // url cıktısı ajax metodunda istek yapılan url
        // burada örnek olarak şöyle:Data.aspx/getir?sayfa="+sayfa
        string[] dizi = url.Split('=');
        // url den sayfa bilgisini alıyoruz.
        int sayfa = int.Parse(dizi[1]);
 
        OleDbConnection baglanti = new OleDbConnection("provider=microsoft.jet.oledb.4.0; data source=" + HttpContext.Current.Server.MapPath("~/isimler2.mdb"));
        OleDbDataAdapter adaptor = new OleDbDataAdapter("select * from isimler", baglanti);
        DataSet ds = new DataSet();
        //sayfa bilgisine göre datamızı çekiyoruz.
        adaptor.Fill(ds, sayfa * sayfalama_adeti - sayfalama_adeti, sayfalama_adeti, "tablo");
 
        GridView gl = new GridView();
        gl.DataSource = ds;
        gl.DataBind();
 
        StringWriter sw = new StringWriter();
        HtmlTextWriter ht = new HtmlTextWriter(sw);
        gl.RenderControl(ht);
        return sw.ToString();
    }


Jquery kodlarımız şöyle olacak:

//verileri sayfalayarak çekecek olan fonksiyonumuz
    function al(sayfa){
        $.ajax({
          type: "POST",
          url: "Data.aspx/getir?sayfa="+sayfa,
          data: "{}",
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function(msg){
                $("#data").html(msg.d);
            }
        });
    }
    $(document).ready(function(){
        al(1); //sayfa yüklenirken birinci sayfada gelecek verileri yüklüyoruz.
    });

Kontrolleri ve datayı yükleyeceğimiz html kodlarımız ise şöyle olacak:

<div id="data"></div> <div><span id="linkler" runat="server"></span></div>

Kodlarını paylaştığım örnekte access veritabanındaki verileri sayfalama işlemi yaparak çekiyoruz. Sayfalama işlemini de ajax işlemini yapan ve sayfa parametresi olan javascript fonksiyonu ile yapıyorum. Bu metod ile hangi sayfanın ve hangi datanın yükleneceğini belirliyorum. Bu fonksiyonu ise sayfa yüklenirken hesaplama yaptığım ve bu hesaba göre oluşturduğum linklerde çağırıyorum. Bu linkler ile hangi saynın ve hangi datanın çekilceğini belirliyorum. Bana göre gayet anlaşılır. Sizler yazacağınız daha basit kodlarla bu tür işlemleri daha basit şekilde yapabilirsiniz.

Yaptığım uygulamayı yan tarafta test edebilirsiniz.
Örnek uygulamayı da buradan indirebilirsiniz.

İyi Çalışmalar!
Mehmet Duran 28 Eylül Pazar 2008 29 29650 3,9
Ajax Asp.net Veritabanı jQuery Jquery Programlama Webmethod Sayfalama JSON
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Jquery ile Sınırsız Treeview Yapımı Asp.net ile Dinamik Kontrol Oluşturma ve Değerlerini Alma Jquery ile Asp.net Sayfasına Ajax İsteğinde Bulunma Asp.net, Jquery ve Ajax ile Yapmış Olduğum Galeri Hazır LISCH ve EISCH Algoritmaları
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Eyp 01 Ekim Çarşamba 2008 18:08 #1
Static metod içinde asp.net kontrollerini kullanamıyoruz. GridView gl = new GridView(); gl.DataSource = ds; gl.DataBind(); StringWriter sw = new StringWriter(); HtmlTextWriter ht = new HtmlTextWriter(sw); gl.RenderControl(ht); return sw.ToString(); Bu şekilde gridi yükleyip String olarak göndermek yerine grid e erişip Bind işlemi yapamazmıyız daha pratik yolu yok mu. Birde [WebMethod] Static bir methodun Atrributesi mi olmak zorunda.
Eyp 01 Ekim Çarşamba 2008 18:11 #2
Asp.net ile Jquery kullanımı ile ilgili daha fazla örneği nereden bulabiliriz. Sizin makaleleriniz gayet aydnlatıcı ancak değişik örnekleri incelemek istiyorum
Mehmet Duran 01 Ekim Çarşamba 2008 19:06 #3
Merhabalar. Jquery ile static method kullanmalıyız. Dinamik olarak kontrollere ulaşmak istiyorsak kullanıcı kontrolleri kullanabiliriz. Ancak yine onunda html çıktısını elde edeceğiz. Ama kontrollere ulaşabiliyoruz. Buradaki yazı işini görebilir. Kaynak olarak .net ile ilgili bi yer yok. Sadece nette gördüğüm uygulamaları kendim yapmaya çalışıyorum.
Sercan 29 Ekim Çarşamba 2008 20:09 #4
Selam verdiğiniz uygulama cok güzel ellerinize sağlık fakat aynı işlemi asp yapmak mümkün mü ?
Mehmet Duran 29 Ekim Çarşamba 2008 21:55 #5
Merhaba. Bu işlemi fonksiyonlar ile yapıyorum. Yani bu fonksiyonları yazabileceğeniz her programlama dili ile bu ve bu tür uygulamaları yapabilirsiniz. Ancak ben bu uygulamayı yapacak kadar asp bilmiyorum.
merhaba 02 Şubat Pazartesi 2009 11:48 #6
merhabalar arkadaşlar ben özel bir soru soracağım size bir sayfa hazırlayacağım aspx + c# ile admin panelinden haberi veritabanına kaydettim bu veri tabanına kaydettiğim haberleri anasayfada ilk 5`ini göstertmek istiyorum haberin başlığına geldiğimde sol tarafta haberin resmide gözüksün haber sayfalarındaki gibi nasıl yapabilirim söylermisiniz arkadaşlar birde örnek yaparsanız çok lazım`da arkadaşlar
Mehmet Duran 02 Şubat Pazartesi 2009 11:52 #7
Merhaba. Yapmak istediğin çok zor birşey değil. Sadece veritabanından son 5 veriyi çekeceksin. Bunu yapmak kolay. Kullanıdğın veritabanlarına göre sorguları var. Manşet sistemine gelince de sitemde ve internette birçok örnek var. Bunlardan birini kullanbilirsin. Data kontrolü olarak Repeater kullanmanı tavsiye ederim.
İyi Çalışmalar!
isimsiz 14 Haziran Pazar 2009 04:10 #8
güzel bi iş anacak cs de veriyi HttpContext.Current.Request.Params["sayfa"].ToString(); şeklinde alabilirsiniz. form dan veriler cekilecekse data: $(`#form1`).serialize() öneririm.
deniz 02 Ağustos Pazar 2009 17:17 #9
merhaba.Ana sayfanızda 6 tane konu listettiriyorsunuz Ornegin 2. sayfaya tıkladıgımız zaman farklı bir sayfada 7 ile 12 arasındaki konuları bind edebiliyorsunuz Ben bunu bir türlü yapamadım.GridView yada Datalist ile aynı sayfada sayfalama yapılıyor .Ama ben farklı bir sayfada geri kalanını bind etmek istiyorum.Link ile dinamik olarak sayfa olusturabiliyorum.Yani buradaki sorguyu bir türlü yapamadım.Bu konuda bilgilendirirseniz sevinirim.Konu baslıgıyla alakasız oldu kusura bakmayın
deniz 02 Ağustos Pazar 2009 17:24 #10
Bir şey daha; örneğin facebooktaki gibi hersayfada bir resim ve o resime ait yorumlar var.Bir sayfaya tıkladığımızda başka bir sayfanın url kısmına photoid yi bind edip ona göre yorumları çekiyor. Buna benzer bir sayfalama nasıl yapılır??Biraz fazla soru srdum ama bir türlü isin icinden cıkamadım :)
Mehmet Duran 02 Ağustos Pazar 2009 23:39 #11
Merhaba. Bunun için kullandığın veritabanına göre sayfalama yapman gerekir ve bu konuda hem mysql için hem de ms sql için yazım var. Mysql için buradaki, ms sql için ise buradaki yazım örnek olabilir. Diğer konuda ise öncelikle Facebook'un kendine özel bir dili olduğunu belirteyim. Dediğin gibi bir örnek için farklı yöntemler geliştirilebilir. Url'den bilgi alıp, buna göre işlem yapmak için querystring mantığını incelemeni öneririm. Sitemde de bu konuda birkaç örnek mevcut.
Beko 01 Eylül Salı 2009 14:20 #12
merhaba, öncelikle sitenizi çok beğendim ve listeme ekledim. Benim Sorum: Asp ve Access ile bu sayfalamayı nasıl kullanabilirim, sitenize bu şekilde bir örnek ekleyebilir misiniz? veya bu şekilde bir örnek linki de olabilir. Saygılar.
Mehmet Duran 01 Eylül Salı 2009 22:44 #13
Asp ile çok fazla uygulama geliştirmiyorum. Ancak bu türlü bir işlem için bir metot yazmak yaterli olur. Bu metoda url'den veya başka bir kontrolden gelecek olan aktif sayfa numarasını parametre olarak göndermek ve bu değere göre de gerekli işlemleri yapmak yeterli olur. Şu anda bir örnek yapmam zor.
osman 11 Şubat Perşembe 2010 17:02 #14
kullanamadım sayfada kodlar tamam veritabanı bağlantısını yaptım sayfa çalışıyor fakat boş geliyor "Data.aspx/getir?sayfa="+sayfa, ayrıca bunu da anlamadım hazır kodları varsa link verebilirmisiniz
Mehmet Duran 11 Şubat Perşembe 2010 22:43 #15
Yazımın son bölümünde örneğin linki var. İndirip incelyebilirsin.
serkan 13 Mayıs Perşembe 2010 11:17 #16
Merhaba,Ben bu uygulamayı masterpage li bir projede yapıyorum. Sorunum şu masterpage de jquery scriptini kullandıyorum, kategori sayfamda ise bu kodları uyguladım. base.OnLoad(e); buraya geldiğinde tekrar pageload kodu çalışıyor, getir metfoduna hiç girmiyor, base.onload(e) kodunu kaldırırsam bu seferde linkler doluyor, datalist gelmiyor.Sayfa kaynağını görüntülediğimde jquery scripti ve masterda kullandığım script kodları görünüyor. Kategori.aspx scripti görünmüyor.
serkan 13 Mayıs Perşembe 2010 12:36 #17
success: function(msg){ $("#data").html(msg.d); } burada error : da unfined mesajı alıyorum, nden olabilir.Linkler geliyor gerçi hep 5 link geliyor ya, data dolmuyor, sizin örenkteki Gridview'i Datalist olarak değiştirdiğimde, data boş geliyor.
Mehmet Duran 14 Mayıs Cuma 2010 00:20 #18
Merhaba. Öncelikle bu örneği çok çok önce yaptığımı ve oldukça amatör olduğunu söyleyim. Ancak işin mantığını kavramak ve daha iyisini geliştirmek için iyi bir örnek sayılır. Burada sayfaları ayrı oluşturup verileri ayrıca çeken bir yapı var. Ancak buna gerek kalmadan hem sayfaları hem de verileri kontrol içinde oluşturup, kontrolü render ettiğimizde tüm verileri topluca alırsak daha kolay bir kullanım olur. Buradaki bahsettiğin sıkıntı hatırladığım kadarıyla GridView'ın databind edildiğinde otomatik olarak verileri listelemesinin datalist kontrolünde olmamasından kaynaklanıyor. Yani datalist databind edildiğinde verileri listelemesi için itemtemplate bölümünün belirlenmesi gerekiyor. Ancak belirttiğim gibi bu biraz kullanışsız bir yöntem. Bunun yerine UserControl kullanıp, bu kontrolleri Ajax işlemlerinde render etmeyi denemelisin. Bu konuda sitemde birçok yazı ve örnek mevcut.
Bahadır 06 Ağustos Cuma 2010 11:55 #19
Ben UpdatePanel kullanıyorum acayip işe yarıyor :D
Mehmet Duran 09 Ağustos Pazartesi 2010 09:56 #20
Updatepanel kullanışlı olabilir ama hız ve performans açısından jQuery ile yarışamaz.
can 23 Ağustos Pazartesi 2010 23:05 #21
hocam öncelikle elinize sağlık. bende şu an bununla uğraşıyorum ve çok sıkıntı çektim . update panel kullandım sorun yaşadım. bunu kullandım güzel çalışıyor ama ben bunu kendim oluşturdugum bir dataliste bağlayamadım. özel bir datalistte template yaptım ve sayfalamayı buna bağlamak istiyorum nasıl yapabilrim nerde hata yapıyorum acaba.
Mehmet Duran 24 Ağustos Salı 2010 17:42 #22
Öncelikle buradaki örnek çok eski ve çok acemi sayılır. Ancak fikir verme bakımından güzel bir örnek. Yapmaya çalıştığın örnek için buradaki örneği indirip incelemen faydalı olacaktır. Çünkü değiştirmen gereken tek yer datasource olarak tanımlanan verilerin senin verilerin olacak ve data kontrolde de senin verilerin gözükecek. Bu şekilde örneği inceleyebilir ve kendi yapacağına uyarlayabilirsin.
Can 26 Ağustos Perşembe 2010 16:13 #23
Hocam Update panel ile ilgili bir sorun yaşıyorum ve baya bir süredir çözemedim yardımcı olursanız sevinirim. Sorun şu update panel içerisinde bir datalistim var ve burada güncelle butonuna tıkladıgı zaman itemcommand dan id sini ve tıklananan alanların verilerini textboxlara alıyorum. sorun şu verileri aldıktan sorna update panel içerisindeki butun kontroller donuyor çalışmıyor hiç biri ta ki refresh yapana kadar sayfayı sonra bir daha çalışıyor ama bir sefere mahsus. sorun ne olabilir hocam ?
Mehmet Duran 27 Ağustos Cuma 2010 14:49 #24
Updatepanel ile pek uğraşmadım. Scriptleri kendin yazarsan daha esnek daha rahat oluyorsun. Ancak updatepanel bunu sağlamıyor. Yaşadığın sorunda ise muhtemelen script sorunu oluşuyordur. Firebug ile sorun olup olmadığını görebilirsin. Onun dışında daha fazla yardımcı olamam.
can 27 Ağustos Cuma 2010 22:12 #25
Anladım hocam teşekkürler ilginiz için.
fatih 10 Kasım Çarşamba 2010 23:19 #26
merhabalar bu örneğinizde gridviewın OnDataBound özelliğini kullanmamız mumkun mu ya. nasıl yapabiliriz.
Mehmet Duran 13 Kasım Cumartesi 2010 13:42 #27
@fatih, burada verdiğim örnek oldukça eski dönemde yapmış olduğum bir örnek. Böyle b,rşey yapmak istiyorsan grid gibi hazır kontroller yerine döngülerle kendi data alanını oluşturman daha kullanışlı olacaktır.
fatih 13 Kasım Cumartesi 2010 14:07 #28
Hocam girdviewın datasource sunu verdik. Veriler yüklenirken gridviewın alanlarını nasıl ayarlayacaz.Donguyle her kayıt için gridviewa alan mı tanımlamamız gerekiyor. ornek uygulama var mıs sizde yada kaynak gosterebilirmisiniz lutfen.
Mehmet Duran 24 Kasım Çarşamba 2010 15:56 #29
@fatih, gridin alanları sen belirtim yapmazsan datasoruce'un aynısı olur. Eğer kendin kolonları belirtirsen istediğin kolonun girdde olmasını sağlarsın. Bunun için gride datasource ile uygun olacak biçimde kolon tanımlamalısın.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Büyük işler gibi, büyük düşüncelerinde davula ihtiyaçları yoktur.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009