JTS'lerin birisinde askere gitmeden önce anlattığım JQuery'ye Giriş ve Ajax EKÜ Notları JTPD'nin sitesinde bulunmaktaydı. Ben askerdeyken siteyi grou.ps'a taşıyan JTPD, benim EKÜ notlarını da taşımış; ancak eğitselin bel kemiği sayılabilecek JSP projesinin URL'si de artık geçerli değil. Ben de madem ki bir kamu hizmeti yapmışım; tam olsun dedim ve eğitselin kayıp JSP projesini buraya yükledim.

Örnek JSP Projesi : jsp_jquery_ajax.zip (98,46 KB)

jQuery'ye Giriş ve Ajax EKÜ Notları

Bu EKÜ'nün amacı, jQuery'yi tanıtmak ve jQuery ile Ajax istekleri yapma yollarını göstermektir. Bu amaç için hazır bir JSP CRUD uygulamasını jQuery kullanarak Ajax uyumlu duruma getireceğiz.

1. JSP projesinin indirilmesi

JSP projesi, basit bir EGS (Ekle-Güncelle-Sil) (CRUD - Create Update Delete) uygulamasıdır ve bir NetBeans Web projesi olarak oluşturulmuştur. Projeyi http://www.ajitatif.com/content/binary/jsp_jquery_ajax.zip adresinden indirin ve istediğiniz bir dizine açın. Projeyi istediğiniz dizine açtıktan sonra NetBeans ile doğrudan açabilirsiniz. Eğer Eclipse ya da başka bir IDE kullanıyorsanız IDE'nize bu projeyi aktarmanız gerekecektir.

2. JSP projesinin yapısına hızlı bakış

2.1. INDEX.JSP

INDEX.JSP sayfasındaki aşağıdaki kodu inceleyin (satırlar [44,80]):

            <div>
                <%  if(request.getParameter("k") == null)
                    {
                %>
                    <jsp:include page="katilimcilar/katilimci_listesi.jsp" />

                <%  }
                    else
                    {
                        switch (request.getParameter("k").toLowerCase().charAt(0))
                        {
                            case 'd':
                %>
                                <jsp:include page="katilimcilar/katilimci_ekle_degistir.jsp">
                                    <jsp:param name="kid" value="<%= request.getParameter(\"id\") %>" />
                                </jsp:include>
                <%
                            break;
                            case 'e':
                 %>
                                <jsp:include page="katilimcilar/katilimci_ekle_degistir.jsp" />
                <%
                            break;
                            case 's':
                %>
                                <jsp:include page="katilimcilar/katilimci_sil.jsp" />
                <%
                            break;
                            default:
                 %>
                                <jsp:include page="katilimcilar/katilimci_listesi.jsp" />

                <%             break;
                        }
                    }
                %>
            </div>

Yukarıdaki satırlar INDEX.JSP'nin aldığı istek parametrelerine göre farklı .JSP sayfaları yüklediğini gösteriyor. Biz bu sayfaları XML HTTP isteği ile yükletip bir pencere gibi açmayı amaçlıyoruz.

2.2. KATILIMCILAR/ dizini altındaki .JSP dosyaları

Bu dosyalar birer BODY etiketi oluşturmazlar; böylece INDEX.JSP içine eklenmeleri kolaylaşır. KATILIMCILAR/KATILIMCI_EKLE_DEGISTIR.JSP satır 79 ve KATILIMCILAR/KATILIMCI_SIL.JSP satırlar 38 ile 48'i inceleyin. Gerekli EGS işlemini yaptıktan sonra response.sendRedirect() yordamı ile INDEX.JSP'yi çağırıyorlar. Böylece güncellenmiş listeyi INDEX.JSP'ye yeniden göstertiryorlar. Biz bu .JSP sayfalarını bir DIV elementi içine yükleyeceğimiz için bu satırları ilerde sileceğiz. Bunun dışında da bu dosyalara dokunmadan sitemizi Ajax uyumlu hale getireceğiz.

2.3. Projenin çalıştırılması

Projeyi çalıştırın ve sistemin nasıl çalıştığını görün. EGS işlemlerindeki sıralı (senkton) POST isteklerinin ve işlem sonrası yönlendirmelerin farkına varın.


Bu satırlarda, jQuery ile ilgili anlatılması gereken ilk kavramı görüyoruz: jQuery veri türü. jQuery kitaplığı, kendi adını verdiği bir veri türü ile karşımıza gelir ve bu veri türü, Javascript'in HTML DOM nesnelerini SARMALAR (encapsulate). $ aslında jQuery veri türünü işaret eder ve $(document) diyerek Javascript'te tanımlı olan document nesnesini (ki bir HTML DOM nesnesidir) sarmalatan jQuery yapılandırıcısını (constructor) çağırırız. Sarmalama sonucunda bir jQuery nesnesi elde ederiz ve bu nesnenin ready olayını (event) satır içinde tanımladığımız yordama yakalatırız. Kod içi tanımladığımız yordam standart bir Javascript yordamıdır ve içinde jQuery'e özgü bir şey barındırmak zorunda değildir. Ne de olsa jQuery de tanımlanmış bir Javascript nesnesi.

Şimdi INDEX.JSP'yi kaydedin ve INDEX.JSP'yi tarayıcınıza yeniden yükletin. Karşınıza gelen Javascript diyalog kutusu ve sayfanın başlığının değişmesi ile kodcunun el kitabının ilk maddesi olan Merhaba Dünya görevimizi tamamlamış oluyorsunuz.

3.2. jQuery seçicileri - 1 (selectors)

jQuery'i jQuery yapan en önemli hususlardan bir tanesi hiç kuşkusuz ki seçici desteğidir. Seçiciler, birden fazla HTML nesnesini seçer ve tek satırda bütün bu seçilen nesnelerin DOMları ile oynamamıza olanak tanır. jQuery seçicileri W3C'nin tanımladığı CSS seçicilerine benzer bir şekilde tanımlanmıştır. jQuery seçicilerinin farkı, CSS seçicileri ile sınırlı olmamalarıdır.

İlk seçici örneğimizi az önce yazdığımız document-ready yordamının içine yazalım. alert() satırını silin ve ready yordamının sonuna aşağıdaki kodu ekleyin:

$('h1').text(document.title);

$ yapılandırıcısına bu kez bir metin (string) girdik ve eğer biraz CSS'ye aşina iseniz ne işe yaradığını anlayacaksınızdır.

$('<etiket_adı>') seçicisi, belgedeki verilen etiket adını taşıyan bütün elementleri seçer.

INDEX.JSP'yi yeniden yüklediğinizde (tabii ki önce IDE'nizden kaydettiken sonra) sayfanın başındaki H1 elementinin metninin değiştiğini göreceksiniz. Eğer isterseniz başka H1 elementleri ekleyin sayfaya; hepsinin metni aynı olacaktır.

3.3. At gitsin at gitsin, eskimişse at gitsin

İlk Ajax isteğimizi gerçekleştirmeden önce, eski usül kodlarımızdan kurtuluverelim. INDEX.JSP'nin satırlar [54,88] aralığını silin ve yerine aşağıdaki kodu yazın (kopyala - yapıştır serbest):

                <div id="icerik">
            <jsp:include page="katilimcilar/katilimci_listesi.jsp" />
        </div>
        <div id="popup"></div>

INDEX.JSP'yi yeniden yüklediğinizde bir görünüş farkı olmayacak; ancak doğal olarak komut bağlantılarına tıkladığınızda elinize bir şey geçmeyecek.

3.4. jQuery seçicileri - 2

jQuery seçicileri etiket adı seçicisi ile sınırlı değil. Aşağıdaki kodu INDEX.JSP'deki SCRIPT elementinin içine, en aşağıya ekleyin:

            function baglantilariAjaxla()
            {
                $('.duzenle .komut,.sil .komut').each(function()
                    {
                        var id = this.getAttribute('href').split('').reverse().join('').match(/\d+(?==di)/).toString().split('').reverse().join('');
                        this.setAttribute('k_id', id);
                    });
            }

Bu kodu yazdıktan sonra bu yordamı çağıracak kodu da doğru yere eklememiz gerekecektir. Bu kodun çalışması için en doğru yer document-ready olayıdır. INDEX.JSP'deki document-ready yordamının sonuna aşağıdaki satırı ekleyin:

baglantilariAjaxla();

Öncelikle, var id = ile başlayan satırı açıklayalım: O satır, Javascript'teki düzenli ifadelerde (regular expression) ileri bakım (look-ahead) desteği olmasına karşın geri bakım (look-behind) desteği olmaması nedeniyle o denli uzun. En basit olarak yaptığımız şey metni ters çevirmek, yine tersinden verdiğimiz ifadeyi ileri bakım ile aratmak ve sonucu yeniden ters çevirmekten ibaret. Ortada kuyu var yandan geç hesabı...

Şimdi gelelim kullandığımız seçicileri açıklamaya:

$('.<sınıf_adı>') seçicisi sınıfları arasında belirtilen sınıf adı olan bütün elementleri seçer.
$('<seçici_1> <seçici_2>') seçicisi (ARADA BOŞLUK KARAKTERİ VAR) seçici_1 ile seçilen elementlerin içerdiği seçici_2 ile seçilen elementleri seçer. Yani seçici_1'in altındaki seçici_2'ler seçilir, seçici_1'ler seçilmez.
$('<seçici_1>,<seçici_2>') seçicisi (ARADA VİRGÜL KARAKTERİ VAR) seçici_1 VEYA seçici_2 ile seçilen elementleri seçer. Kümelerdeki birleşim işlemi gibi.

Bu bilgiler ışığında, $('.duzenle .komut,.sil .komut') seçicisi "(duzenle) sınıflı elementlerin altındaki (komut) sınıflı elementleri VEYA/BİRLEŞİM (sil) sınıflı elementlerin altındaki (komut) sınıflı elementleri" seçecektir.

jQuery.each olayı, seçici tarafından seçilmiş her element için bir kez tetiklenir ve bu olayı yakalayan yordam içinde this anahtar sözcüğü seçili elementin HTML DOM nesnesini gösterir.

Kısaca; bu kodun yaptığı iş, KATILIMCILAR/KATILIMCI_LISTELE.JSP'den gelen her bir düzenle ve silme bağlantısının (link) HREF niteliğinden (attribute) bağlı oldukları nesnenin ID'sini alıp, yeni bir K_ID niteliği yaratarak bu niteliğin değerine yazmaktır. Böylece yapacağımız Ajax çağrılarında her komut bağlantısı hangi nesneye göre çağrı yapacağını bilecek. INDEX.JSP'yi yeniden yükleyip Firebug'da hangi bağlantılara hangi nitelikler eklenmiş inceleyin:

Tablonun en alltındaki "Ekle" komutunun neden K_ID niteliğine sahip olmadığını açıklayın.

3.5. jQuery veri türüne bir adım yakından bakış

Hiç kod yazmadan biraz Javascript adımlatalım (debug). Firebug'ı açıp "Script" sekmesine tıklayın. 33. satırı bulun ve satır numarasının yanındaki şeride tıklayın. Firebug sizin için o satıra bir durak noktası koyacak. Şimdi sayfayı yeniden yükleyin ve tarayıcınınzın durak noktasına ulaşmasını bekleyin.

İşte jQuery sihiri bu! Sarmalanan bir Javascript dizisi (array) ve işte yararlı yordamların tümü!!

3.6. HREF mi? O da ne?

Ajax uyumlu bütün sitelerde olduğu gibi biz de A elementlerimizin (tabii ki hepsinin değil) HREF niteliklerini "#" ile değiştireceğiz. Bunun için aşağıdaki kodu INDEX.JSP'de baglantilariAjaxla() yordamının son satırına ekleyin:

$('.komut').attr('href', '#');

INDEX.JSP'yi yeniden yüklediğinizde komut sınıfını taşıyan bütün bağlantıların HREF niteliklerinin "#" olduğunu göreceksiniz.

3.7. Ajax'a hazırlık

Aşağıdaki kodu baglantilariAjaxla() yordamının altına ekleyin:

            var eylem = 'ekle';
            function katilimciKomutIsle()
            {
                if ($(this).parents('.duzenle').length != 0)
                {   /* düzenle bağlantısı */
                    alert('düzenleyeceğiz inşallah');
                    eylem = 'duzenle';
                }
                else if ($(this).parents('.sil').length != 0)
                {   /* sil bağlantısı */
                    alert('sileceğiz inşallah');
                    eylem = 'sil';
                }
                else if ($(this).parents('.ekle').length != 0)
                {   /* ekle bağlantısı */
                    alert('ekleyeceğiz inşallah');
                    eylem = 'ekle';
                }
                else
                {
                    eylem = '?';
                    return false;
                }
                return false;
            }

eylem adlı değişken, ileride hangi EGS eyleminin gerçekleştirileceğini anlamak için kullanılacak bir değişken; şimdilik önemsemeyin. Buradaki mantığı açıklamadan önce bu yordamın çağrılacağı koşulu sağlayacak kodu yazalım. Aşağıdaki kodu baglantilariAjaxla() yordamının sonuna ekleyin:

$('.komut').click(katilimciKomutIsle);

Buna alternatif olarak, 3.6'da yazdığınız kodu aşağıdaki şekilde değiştirebilirsiniz; aynı sonucu verecektir:

$('.komut').attr('href', '#').click(katilimciKomutIsle);

jQuery'nin bazı yordamları değişiklik yaptıkları jQuery nesnesinin son durumunu döndürür. Bu da aynı seçici ile birden fazla iş yapabilmemizi sağlar.

katilimciKomutIsle() yordamı içindeki if ($(this).parents('.<sınıf_adı>').length != 0) satırları tıklanan elementin ataları (parent) hiyerarşisinde <sınıf_adı> sınıfını taşıyan bir elementin olup olmadığını denetler. Eğer tıklanan element "duzenle" adlı sınıfı taşıyorsa if kod bloğunun içine dallanılır. length özelliği Javascript dizilerine ait olan length'tir. $(this) diyerek olayı fırlatan HTML elementinin nesnesini jQuery'ye sarmalatıyoruz ve sonra jQuery.parents('<seçici>') yordamını kullanarak bu nesnenin DOM hiyerarşisindeki bütün ataları arasından seçici ile seçtiğimiz elementleri bir diziye alıyoruz. Son olarak da bu dizinin uzunluğuna bakarak olayı fırlatan elementin hangi EGS eylemi için kullanılacağını belirliyoruz.

INDEX.JSP'yi yeniden yükleyin ve komut bağlantılarından birisine tıklayın. Karşınıza ilgili uyarı diyaloğu çıkacaktır.

4.1. Ben bugün Ajax gördüm - İlk Ajax çağrısı

İlk Ajax çağrımızı, icerik ID'li DIV elementimizin içine KATILIMCILAR/ dizini altındaki .JSP dosyalarını yükleyerek yapacağız. jQuery, bu iş için mükemmel bir yordam sunuyor: jQuery.load(). Aşağıdaki kodu katilimciKomutIsle() yordamının ÜZERİNE yazın; yordamı biraz değiştiriyoruz:

            function katilimciKomutIsle()
            {
                if ($(this).parents('.duzenle').length != 0)
                {   /* düzenle bağlantısı */
                    $('#popup').load('katilimcilar/katilimci_ekle_degistir.jsp?kid=' + this.getAttribute('k_id'), '', gosterPopup);
                    eylem = 'duzenle';
                }
                else if ($(this).parents('.sil').length != 0)
                {   /* sil bağlantısı */
                    $('#popup').load('katilimcilar/katilimci_sil.jsp?id=' + this.getAttribute('k_id'), '', gosterPopup);
                    eylem = 'sil';
                }
                else if ($(this).parents('.ekle').length != 0)
                {   /* ekle bağlantısı */
                     $('#popup').load('katilimcilar/katilimci_ekle_degistir.jsp', '', gosterPopup);
                     eylem = 'ekle';
                }
                else
                {
                    eylem = '?';
                    return false;
                }
                return false;
            }

Ardından hiç durmadan; aşağıdaki yordamı katilimciKomutIsle() yordamının altına ekleyin:

            function gosterPopup()
            {
                $('#popup').css('display', 'block');
            }

jQuery.load(URL, parametre_listesi, geri_çağrı_yordamı) yordamı, seçilmiş olan elementin içine verilen URL'den, parametre_listesi parametreleri ile bir sırasız (asenkron) çağrı (ya da Ajax çağrısı) sonrasında dönen HTML kodunu yapıştırır. İşlem tamamlandıktan sonra da belirtilen geri_çağrı_yordamı (callback) çağrılır. Bizim örneğimizde bir düzenleme isteği için katilimcilar/katilimci_ekle_degistir.jsp?kid=<katılımcı_id> URL'sine boş parametrelerle gidilir ve gelen HTML $('#popup') ile seçilmiş olan elementin içine yapıştırılır.

$('#<element_id>') seçicisi, ID niteliği element_id'ye eşit olan bütün elementleri seçer.

jQuery.load() yordamı istenilen sayfayı çağırıp seçilmiş olan nesnenin içine kattıktan sonra çalışan gosterPopup() yordamı seçili elementlerin tarzlarını (style) görmeye ve değiştirmeye yarayan jQuery.css() yordamının örneğini gösteriyor. Örneğimizde popup ID'li element seçilip "display" adlı tarzını "block"a eşitliyoruz. Eğer Ajax çağrısının neye benzediğini görmek isterseniz yardımınıza yine Firebug koşacak. "Console" sekmesini açın yeter.

Komut bağlantılarının açtığı pencereciklerin onay ve iptal düğmelerine basın. Hala çalışıyorlar; ama bir şeyleri eksik - gerçek Ajax!

4.2. Biraz biberleyelim şunu - Canlandırmasız Ajax soğansız salataya benzer

İşin içine birazcık görsellik ekleyelim. jQuery, basit ama şık canlandırma (animasyon) seçenekleriyle gelir. Aşağıdaki kodu az önce yazdığımız gosterPopup() yordamının ÜZERİNE yazalım:

            function gosterPopup()
            {
                $('#popup').slideDown('0.4');
            }

INDEX.JSP'yi yeniden yükleyin ve komut bağlantılarından birine tıklayın. Oldukça kolay ve bir o kadar da şık değil mi?

4.3. jQuery muhtırası - HTML DOM'a doğrudan müdahale

Pencereciklerimizin onay ve iptal tuşlarını Ajax destekli duruma nasıl getirebiliriz? Önce onları FORM elementinin içinden çıkarmak gerek. Eğer nedenini bilmiyorsanız; size ödev olsun, biz çıkalım kerevetine. Aşağıdaki kodu gosterPopup() yordamının hemen altına ekleyin:

            function saklaPopup()
            {
                $('#popup').slideUp('0.4');
            }

            function popupGosterildi()
            {
                /* form elementini silmek gerek; yoksa düğmeler POST'a gider */
                $('form').parent().append($('form').html());
                $('form').html('');

                /* iptal düğmelerini ayarla */
                $('input[name="iptal"]').removeAttr('onclick');
                $('input[name="iptal"]').click(saklaPopup);
            }

popupGosterildi() yordamını tetikleyecek kodu da gosterPopup() yordamına ekliyoruz. Aşağıdaki kodu gosterPopup() yordamı içindeki tek satırın ÜZERİNE yazın:

                $('#popup').slideDown('0.4', popupGosterildi);

jQuery.parent() yordamı, seçilmiş nesnenin ilk atasını döndürür ve jQuery.append() yordamı da seçili nesnenin DOM'una içerik eklemek için kullanılır. Ekleme işlemi, DOM'un sonuna yapılır. $('form').parent().append($('form').html()) satırıyla, FORM elementinin içindeki HTML kodunu, FORM elementinin ilk atasına ekliyoruz. Daha sonra da $('form').html('') ile bütün FORM elementlerini sayfa DOM'undan siliyoruz. Böylece sayfadaki FORM elementinden kurtuluyoruz, ama içeriği bize kalıyor.

$('[<nitelik_adı>="<değer>"]') seçicisi, nitelik_adı adlı niteliği değer'e eşit olan elementleri seçer.
$('<seçici_1><seçici_2>') seçicisi (ARADA KARAKTER YOK) seçici_1 VE seçici_2 seçicilerini sağlayan elementleri seçer. Küme işlemlerinden KESİŞİMe benzer. Örnekteki $('input[name="iptal"]') seçicisi INPUT elementlerinden NAME adlı niteliği "iptal"e eşit olan elementleri seçer.

INDEX.JSP sayfasını yenileyin ve bir pencerecik açın. Pencereciğin kodunda FORM elementini bulamayacaksınız. (DOM'daki anlık değişimleri izlemekte Firebug'un üstüne yoktur, onu da söyleyelim)

4.4. Ajax, şimdi !!

Ajax'ta son dokunuşlara vardık. Önce eski .JSP sayfalarımızdaki response.sendRedirect() kodlarından kurtulalım. KATILIMCILAR/KATILIMCI_EKLE_DEGISTIR.JSP'de 79. ve KATILIMCILAR/KATILIMCI_SIL.JSP'de 37 ile 49. satırları silin. Sonra da aşağıdaki kodu popupGosterildi() yordamının hemen altına ekleyin:

            function halletAjax()
            {
                switch (eylem)
                {
                    case 'ekle':
                    case 'duzenle':
                        $.post(
                        'katilimcilar/katilimci_ekle_degistir.jsp',
                        {
                            kat_id: $('input[name="kat_id"]').attr('value'),
                            kat_adSoyad: $('input[name="kat_adSoyad"]').attr('value'),
                            kat_kurum: $('input[name="kat_kurum"]').attr('value'),
                            kat_onaylandi: $('input[name="kat_onaylandi"]').attr('checked'),
                            'onay.x': 1
                        },
                        ajaxTamamlandi);
                        break;
                    case 'sil':
                        $.post(
                        'katilimcilar/katilimci_sil.jsp',
                        {
                            id: $('input[name="kat_id"]').attr('value'),
                            kat_id: $('input[name="kat_id"]').attr('value'),
                            'onay.x': 1
                        },
                        ajaxTamamlandi);
                        break;
                }
            }

            function ajaxTamamlandi()
            {
                saklaPopup();
                tazeleListe();
            }

            function tazeleListe()
            {
                $('#icerik').html('Yükleniyor...');
                $('#icerik').load('katilimcilar/katilimci_listesi.jsp', '', baglantilariAjaxla);
            }

Yine hemen halletAjax() yordamını çağıracak kodu verelim. Aşağıdaki kodu popupGosterildi() yordamının en altına ekleyin:

                /* onay düğmelerini ayarla */
                $('input[name="onay"]').click(halletAjax);

jQuery.post(URL, parametre_listesi, geri_çağrı_yordamı) yordamı URL'ye POST yöntemiyle verilen parametre_listesini gönderir ve yanıt geldikten sonra geri_çağrı_yordamı yordamını çağırır. Eğer Ajax isteğini GET yöntemiyle yapmak isterseniz jQuery.get(URL, parametre_listesi, geri_çağrı_yordamı) yordamını çağırmanız gerekir. jQuery, ayrıca Javascript ve JSON geri dönüşleri de destekler. jQuery'nin gönderdiği Ajax çağrısı üzerinde daha fazla denetim arzu edenler için jQuery.ajax() yordamını da kullanabilir.

Kodu kaydedip INDEX.JSP'yi yeniden yükleyin. Artık web siteniz Ajax uyumlu, keyfini sürün :)

5. jQuery eklentilerine hızlı bakış

jQuery hızlı ve güvenilir bir kitaplık olduğu için dünya çapında popülerliği çok hızlı arttı ve eklenti sayısı da paralel bir hızla arttı. jQuery eklentileri, jQuery kullanan kitaplıklardan başka bir şey değildir ve jQuery'nin sitesinde pek çok yararlı eklenti bulabilirsiniz.

5.1. jQuery tablesorter eklentisi

tablesorter, sayfadaki tabloları istemci tarafında sıralamayı sağlayan kullanımı çok kolay ve çok etkili bir eklentidir. Önce aşağıdaki satırları INDEX.JSP'nin HEAD elementine ekleyin:

        <link rel="Stylesheet" href="css/tablesorter.css" type="text/css" />
        <script type="text/javascript" language="javascript" src="js/jquery.tablesorter.min.js"></script>

.JS ve .CSS dosyaları proje dizininde vardı, o yüzden dosyalar var mı diye endişelenmeye gerek yok.

Şimdi de tabloyu sıralatacak kodu ekleyelim. Aşağıdaki kodu baglantilariAjaxla() yordamının içine, en sona ekleyin:

                $('.liste').addClass('tablesorter').tablesorter(
                {
                    sortList: [[2,0]]
                });

tablesorter eklentisi jQuery nesnesine tablesorter() yordamını ekler ve şekildeki kullanım 2 numaralı sütunu artan sıraya göre sıralatır (sortList parametresi ile). Sütun numaraları 0'dan başlar ve virgülden sonraki 0 artan sıralamayı belirtir. azalan sıralama için 1 kullanılır.

tablesorter ile ilgili daha ayrıntılı bilgi isteyenler http://www.tablesorter.com adresine başvurabilirler.

6. Son Söz

jQuery, yoğun Javascript kullanılması gereken sitelerde sarılacağımız 1 numaralı Javascript kitaplığı olmaya aday. Kolaylığı, kullanışlılığı ve hal-i hazırdaki eklentileriyle incelemeye ve öğrenmek için harcanan zamana kesinlikle değer. Biz de bu EKÜ'de jQuery'ye giriş için gerekli temel bilgileri vermek için önceden hazırladığımız bir JSP EGS uygulamasını, barındırdığı .JSP kodlarına mümkün mertebe az dokunarak Ajax uyumlu hale getirmek için jQuery'den yardım istedik. Sonuçta ticari bir yazılımın parçası olacak kadar doğru bir ürün elde etmesek de maksadımızı karşılayack bir uygulama olduğu inancını taşıyoruz.