Merhaba bu yazıda jQuery DataTable Satır Silme İşlemi nasıl yapılırı anlatacağım. Son yazının üzerinden bir hayli geçti. Bu yazı ile DataTable eklentisinde yaşanan bir karmaşanın nasıl çözüleceğini hep birlikte göreceğiz.
jQuery DataTable Satır Silme İşlemi Nasıl Yapılır
Bu işlem basit bir işlem gibi görünüyor olabilir ancak silinen datanın sadece tekrardan render edilen kısımdan silindiğini söyleyeyim. Bu şu anlama geliyor. Siz bir satırı siliyor olsanız bile aslında data domdan silinmiş olmuyor. Örnek verecek olursak klasik bir satır silme işlemi closest fonksiyonuyla şöyle gerçekleşiyor:
1 | $("element").closest('tr').remove(); |
Bu işlem standart silme işlemini gerçekleştirir ancak DataTable kendisi ayrıca render ettiği datayı doma gömüyor. Asıl datamız da domda kalmıyor ve böylelikle DataTable domundan kurtulamıyoruz. Bu yüzden jQuery DataTable Satır Silme İşlemi için eklentinin kendi API dokümanına göz gezdirmemiz gerekiyor.
DataTable’ı Tekrar Initialize Edelim
Öncelikle daha önceden oluşturulan tablonun re-init edilmesi gerekiyor. Bu işlemi şöyle gerçekleştirelim:
1 | $("#tablomuz").DataTable() |
Tablo init edildikten sonra satırı seçmeliyiz.
Mevcut Satırı Seçelim
Şu anda mevcut satırı şöyle seçeceğiz:
1 | $("#tablomuz").DataTable().row() |
Burada row fonksiyonu ilgili elementi seçecek. Bu element satırın kendisi de olabilir, bir buton da olabilir. Örneğin şöyle düşünelim:
1 2 3 | $("#tablomuz").DataTable() .row($(".tabloBody") .find('tr[data-id='+ ID+']')) |
Satırımız ve dom elementimiz şu anda seçili durumda. Artık bu elementi silmek için remove() fonksiyonunu kullanacağız. Ancak tek başına remove fonksiyonu hala bir işe yaramıyor. Çünkü remove fonksiyonu sonrasında tablonun tekrar init edilmesi gerekiyor. Örneğin sildiğiniz data eski init edilen datanın değerlerini taşıyor. Bundan dolayı draw fonksiyonunu kullanacağız.
Remove Fonksiyonu
Bu fonksiyonla ilgili datayı şöyle sileceğiz:
1 2 3 4 | $("#tablomuz").DataTable() .row($(".tabloBody") .find('tr[data-id='+ ID+']')) .remove() |
Draw Fonksiyonu
Bu fonksiyon basit bir şekilde tabloyu tekrar çizmek ya da ilk çizim işlemlerini gerçekleştirmek için kullanılan bir metoddur. Default olarak herhangi bir değer almamaktadır. Eğer bu fonksiyonu kullanmadan bir işlem gerçekleştirirseniz kendisinden önce gelen chined method herhangi bir şekilde etki gerçekleştirmeyecektir. Bu fonksiyonu şöyle kullanacağız:
1 2 3 4 5 | $("#tablomuz").DataTable() .row($(".tabloBody") .find('tr[data-id='+ ID+']')) .remove() .draw(); |
Eğer klasik yöntemle remove işlemini gerçekleştirseydiniz ilk aşamada satırın domdan silindiğini düşünebilirdiniz ancak page navigate edildiği anda ve tekrar back-navigate olduğunda sildiğinizi düşündüğünüz datanın geri geldiğini göreceksiniz.
Bu veri güvenliği açısından bazı durumlarda sorun çıkarabileceği için datatable api seçilerek silme işlemi gerçekleştirilecektir.
Soru ve görüşleriniz için [email protected] adresine mail atabilirsiniz.