CategoryJavascript

DataTables Nedir, Nasıl Kurulur, Neler Yapabiliriz ?

Merhaba arkadaşlar bugün sizlere DataTables isimli bir jQuery eklentisinden bahsedeceğim.

DataTables’in ne olduğunu açıklamak gerekirse oluşturduğumuz tablolar üzerinde AJAX kullanmadan veri arama, sayfalama gibi işlemleri yapmamızı sağlıyor daha basit bir şekilde anlatmak gerekirse normalde AJAX, DOM ve SQL ile yapabileceğimiz işleri bunların hiç biri hakkında bilgi ve ya uğraş gerektirmeden bize sunan bir eklenti olduğunu söyleyebiliriz.

DataTables ile Neler Yapabiliriz ?

DataTables ile yapabileceğiniz en temel şeylerden bahsetmek gerekirse

  • Sayfalama
  • Anlık Arama
  • Sütunlar üzerinden sıralama (Tekil ve ya çoğul)
  • Mobil Cihazlara Uyumlu
  • Kolayca Tema Yapılabilinir (Bootstrap 3/4, Semantic UI, Foundation ve DataTables Theme Creator)

bunun haricinde kendisi içinde eklentilerin geliştirilmesine izin veren bir sisteme sahip olması ve açık kaynak kodlu olması da eklentiyi kendimize göre özelleştirebileceğimizi göstermektedir.

Bu saydıklarım haricinde yapabileceğiniz diğer özellikleri de görmek isterseniz buraya tıklayabilirsiniz.

DataTables Nasıl Kurulur/Kullanılır ?

DataTables’i kurmak için 2 adet CSS ve JS dosyalarını sistemimize ekleyip daha sonra basit bir JS kodu ile DataTables’i kullanmaya başlayabiliriz.

CSS / JS CDN

https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css

CSS

https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js

Javascript

Javascript Kodu

$(document).ready( function () {
    $('#myTable').DataTable();
} );

Javascript kodu olarak bahsetmiş olsam bile en başta da söylediğim gibi DataTables bir jQuery eklentisi olduğu için jQuery ile kodlamamız gerekiyor yani bu da DataTables’dan önce jQuery’i de sistemimize eklememiz gerekiyor.

Peki DataTables’den bahsettim hine de bu işleri ben kendim AJAX, DOM ve SQL bilgimle rahatça yaparım diyebilirsiniz fakat dünyadaki Adobe, Sony, Nasa, Tesla, Amazon gibi firmalar dahi DataTables’ı kullanmaya tercih ediyor.

DataTables hakkında daha detaylı bilgi alabilmek için buraya tıklayabilirsiniz.

Özet,

Bu yazımda sizlere DataTables’in ne olduğundan, neler yapabilirsiniz ve nasıl kurabiliriz konularından bahsettim. DataTables ile Tablolar üzerinde herhangi bir ekstra işlem yapmadan tablolar üzerinde arama, sayfalama gibi işlemleri hızlıca yapabiliriz.

Bu yazımı beğendiyseniz ve Javascript hakkında yazmış olduğum diğer yazıları merak ediyorsunuz buraya tıklayınız.

AJAX Nedir ? jQuery ile Ajax Kullanımı

Merhaba arkadaşlar bu yazımda sizlere AJAX’ın ne olduğundan ve jQuery ile kullanımından bahsedeceğim.

AJAX Nedir ?

Ajax, Asynchronous JavaScript And XML (Eşzamansız Javascript ve XML) bir tekniktir. AJAX’ın temel amacı kullanıcıya web sayfasını tamamen yeniden yükletmeden bazı işlemlerin tamamlanmasını sağlamaktır.

AJAX’ın Çalışma Prensibinden bahsetmek gerekirse şu fotoğrafı kullanmamız yeterli olacaktır.

Şimdi bunu açıklamamız gerekirse öncelikle Tarayıcımızda bir işlem gerçekleşir ve bir XMLHttpRequest objesi oluşturulur ve gönderilir. Gönderilen HTTPRequest işleme alınır ve bir geri dönüt oluşur bu geri dönüt de tarayıcıya tekrar geri gönderilir. Böylece arka plan da bir sürü işlem olurken kullanıcı direkt olarak sonuç ile karşımıza çıkar.

AJAX’ın ne işe yaradığını kısaca özetlemek gerekirse

  • Sayfa yüklendikten sonra Web Sunucusundan veri okur.
  • Sayfayı tekrar açmadan sayfa içerisinde değişiklik yapar
  • Verileri Web Sunucusuna arka planda gönderir.

jQuery ile Ajax Kullanımı

AJAX tekniğini saf Javascript ile sizlere aktarmak daha karmaşık olacağından jQuery ile kullanımından bahsetmek istiyorum.

Elimizde bir İletişim Formu olduğunu varsayalım ve ben gönder butonuna bastığım zaman AJAX tekniği ile sonucun karşıma çıkmasını istiyorum.

O zaman öncelikle yapmamız gereken 2 şey var öncelikle FORM elementimize bir id değeri ve onsubmit=”return false;” ve Gönder input/button umuza da hine bir id değeri atayalım. Bu işlemleri yaptıktan sonra jQuery ile bu işlemi 3 yöntem ile yapabiliriz bunlar $.post, $.get, $.ajax yöntemleri şimdi bunlardan bahsetmeye başlayalım.

Form elementine ve Gönder butonuna gerekli işlemleri yaptıktan sonra şöyle bir kalıpta kodlarımızı yazacağız.

$("#iletisim_gonder").on("click",function(e){

        let formData = $("#iletisim_form").serialize();

        // VERİ GÖNDERME işlemi burada yapılacak

        e.preventDefault();
    });

Burada yazılı olan kodlar şu işlemi yapmakta id’si iletisim_gonder olan elemente tıklandıktan sonra id’si iletisim_form’un içindeki tüm inputlar “name: value” tipinde JSON formatına(serialize) dönüştürülüyor ve preventDefault ile ise de butonun tıklandıktan sonra bu içeride yapılan işlemler haricinde bir işlem yapmasını engellemiş oluyoruz.

$.post

        $.post('iletisim_gonder.php', formData, function(response){
            if(response.hata){
                alert(response.hata);
            }else{
                alert("Ekleme başarılı!");
            }
        }, 'json');

$.post fonksiyonu gördüğünüz üzere 3 parametre alıyor bunlardan ilk çekilen verilerin hangi sayfaya gönderileceği ikinci parametresi gönderilecek veriler ve son parametre ise bir Callback fonksiyonudur.

$.get

$.post('iletisim_gonder.php', formData, function(response){
            if(response.hata){
                alert(response.hata);
            }else{
                alert("Ekleme başarılı!");
            }
        }, 'json');

$.post fonksiyonundan tek farkı $.post yerine $.get yazmamız.

$.ajax

$.ajax yöntemi aslında $.post ve $.get yöntemlerinin biraz daha kalıplara oturtulmuş halidir en sade haliyle kullanımını göstermek gerekirse şöyle bir kod parçacığı karşımıza çıkar

 $.ajax({
        type: METOD,
        url: URL,
        data: Form Data,
        dataType: DATA TYPE,
        success: function(response){
            
        }
    });

$.post ve $.get ‘de 3 parametre alan bir fonksiyon şeklinde çalışıyordu. $.ajax fonksiyonu ise 1 adet JSON veri türünde değer gönderdiğimiz bir fonksiyon olduğunu farketmişsinizdir.

  • type alanında hangi metod ile veri gönderimi yapacağınızı yazıyorsunuz yani POST ve ya GET yazmanız gerekicek.
  • url kısmına hangi dosyaya gönderim yapacağınızı
  • data kısmına hangi dataları göndericeğinizi
  • dataType bize dönücek sayfayı nasıl okumamız gerektiğini
  • success kısmında ise eğer gönderim başarılı olursa ne olacağını belirtmemiz gerekiyor.

$.ajax kullanımında daha detaylı bilgi almak için buraya tıklayınız.

Ajax ile Nerelerde Kullanılır

  • İl, İlçe seçimi
  • Arama sonuçlarını anlık gösterme
  • Herhangi bir FORM gönderirken sayfa yenilenmesini engelleme
  • Otomatik Yazı Tamamlama

gibi alanlarda ve daha fazlasında rahat bir şekilde kullanabilirsiniz.

Özet,

Bu yazımda sizlere AJAX Tekniğinin ne olduğundan bahsettim ve AJAX tekniğini jQuery ile nasıl kullanabileceğinizi gösterdim. AJAX, sayfa yenileme işleminin önüne geçen ve web sunucusuna arka plandan veri gönderme ve ya arka plandan veri alıp sayfa yenilemeye duymadan kullanıcıya bu aldığımız verileri gösterebileceğimiz bir tekniktir.

Eğer bu yazımı beğendiyseniz ve Javascript adına yazmış olduğum diğer yazıları merak ediyorsanız buraya tıklayabilirsiniz. Ayrıca jQuery’nin ne olduğunu bilmiyorsanız “jQuery Nedir ?” adlı yazımıda incelemenizi tavsiye ederim.

Javascript DOM Element İşlemleri

Bir önceki yazımda bahsetmiş olduğum Javascript DOM Fonksiyonları yazısının devamı niteliğinde Javascript DOM Element İşlemleri yazısını yazmaya karar verdim.

Bu yazımda bahsedeceğim fonksiyonlardan bahsetmek gerekirse

  • ID’ye göre element bulma
  • Etiket adına göre element bulma
  • Class özelliğine göre element bulma
  • CSS Selector ile element bulma

ID’ye göre Element Bulma

ID’ye göre element bulma işleminden aslında Javascript ile DOM İşlemleri konusunda bahsetmiştim ama hine de bahsetmek gerekiyor.

HTML – Javascript

<!doctype html>

<html>

<head></head>

<body>

<p id=”demo”>Aydın Can Altun</p>

<script>

var demo = document.getElementById(“demo”);

</script>

</body>

</html>


Bu örnekte kullandığımız getElementById fonksiyonunun girilen değere sahip elementi geri döndürür. Bu fonksiyonunun genel bir kullanımından bahsetmek gerekirse.

var myElement = document.getElementById(id);

Etiket Adına göre Element Bulma

Etiket adına göre element bulma işleminde kullanacağımız fonksiyon getElementsByTagName() ile gerçekleştirilir.

HTML – Javascript

<!doctype html>

<html>

<head></head>

<body>

<p>Etiket Adına göre Element Bulma</p>

<p>Aydın Can Altun</p>

<p>getElementsByTagName</p>

<script>

var pElements = document.getElementsByTagName(“p”);

</script>

</body>

</html>

Bu örnekte de gördüğünüz gibi getElementsByTagName() fonksiyonunu kullanarak etiket adına göre elementleri çekebiliriz. Bu fonksiyon bize bir dizi döndürür ve o sayfadaki tüm elementleri belirtilen etikete göre yukarıdan aşağıya doğru sıralar. Bu fonksiyonun basit kullanımından bahsetmek gerekirse

var elements = document.getElementsByTagName(tagName);

Class Özelliğine göre Element Bulma

Class özelliğine göre element bulma işleminde kullanıcağımız fonksiyon getElementsByClassName() ile gerçekleştirilir.

HTML – Javascript

<!doctype html>

<html>

<head></head>

<body>

<div id=”demo”>

<h5 class=”aydin”>Class Özelliğine göre Element Bulma</h5>

<p class=”aydin”>Aydın Can Altun</p>

</div>

<script>

var demo = document.getElementById(“demo”);

var className = demo.getElementsByClassName(“aydin”);

</script>

</body>

</html>

Bu örnekte iki adet fonksiyon kullandık. Önce getElementById fonksiyonu ile id değeri demo olan elemente ulaşıyoruz daha sonra getElementByClassName fonksiyonu ile id değeri ile ulaştığımızdan elementin içinde class özelliği aydin olan elementleri bir dizi halinde geri döndürmesini sağlıyoruz.

var className = document.getElementsByClassName(className);

CSS Selector ile Element Bulma

Eğer bazı CSS özelliklerine göre kısıtlayacak şekilde element bulma işlemi yapmak istiyorsak CSS Selector kullanmamız gerekiyor. Burada querySelectorAll fonksiyonunu kullanacağız.

HTML – Javascript

<!doctype html>

<html>

<head></head>

<body>

<p class=”demo”>CSS Selector ile Element Bulma</p>

<p class=”demo”>Aydın Can Altun</p>

<p>Deneme</p>

<script>

var selector = document.querySelectorAll(“p.demo”);

</script>

</body>

</html>

Yukarıda ki örnekte 3 adet p elementimiz mevcut ve querySelectorAll fonksiyonu ile class özelliği demo olan tüm p elementlerini seçmesini sağladık. querySelectorAll fonksiyonu bize class özelliği demo olan tüm p elementlerini bize bir dizi olarak göndericek yani

console.log(selector[0]);

console.log(selector[1]);

Bu kodları yazarsak önce CSS Selector ile Element Bulma yazısını içinde barındıran p elementini bize döndürürken daha sonra Aydın Can Altun yazanı döndürecektir ama eğer bu dizinin içinde başka bir eleman var mı diye bakarsak hata ile karşılaşırız. Çünkü class özelliği demo olan 2 adet p elementimiz bulunmaktadır yaptığımız sorguda içinde Deneme yazan p elementi dahil olmayacaktır.

Bu yazımda bir önceki Javascript yazım olan Javascript DOM Fonksiyonlarının ilk kısmı olan HTML Elementleri Bulma kısmını anlatmış oldum. Bu yazımı beğendiyseniz ve Javascript hakkında yazmış olduğum diğer yazılarıda merak ediyorsanız buraya tıklayınız.

Javascript DOM Fonksiyonları

Merhaba bu yazımda önceden sizlere bahsetmiş olduğum Javascript ile DOM İşlemleri yazısının bir devam olarak Javascript DOM Fonksiyonlarından bahsedeceğim.

Javascript DOM ile bir HTML elementlerini bir obje olarak düşünüp hepsine erişmemizi ve onların üzerinde düzenlemeler yapmamızı sağlar.

HTML Elementlerini Bulma

document.getElementById(id);id ye göre element bulma
document.getElementsByTagName(name);etiket adına göre elementleri bulma
document.getElementsByClassName(name);class adına göre elementleri bulma

HTML Elementlerini Değiştirme

element.innerHTML = Yeni HTML İçeriğiElemente yeni bir içerik ekler
element.setAttribute(attribute,value)Elemente yeni bir özellik ekler
element.style.ozellikElementin stil özelliklerini değiştirir.

Element Ekleme ve Silme

document.createElement(element)Element Oluşturur
document.removeElement(element)Element Siler
document.appendChild(element)Elementi ekler
document.replaceChild(element)Elementin yerini değiştirir

Event Handler Ekleme

document.getElementById(id).onclick = function(){code}Onclick eventi özelliği ekler.

Bu yazımda Javascript DOM Fonksiyonlarından bahsettim. İleri ki yazım da Javascript DOM Element İşlemleri konusuna giriş yapacağım.