İlginizi Çekebilir
  1. Ana Sayfa
  2. Yazılım
  3. Django Datatable Kullanımı

Django Datatable Kullanımı

Django Datatable Kullanımı! Merhaba arkadaşlar, django ile datatable kullanımı nedir, nasıl yapılır sorusuna cevap vermek istiyorum.

Datatable Nedir? Nasıl Kullanılır?

DataTable Nedir?

Django Datatable Kullanımı – Datatable, jquery ile geliştirilmiş yardımcı bir görüntüleme kütüphanesidir. Web projelerinde verileri düzenli göstermek için table(tablo) kullanılır. Bu tablolarda arama, sıralama, filtreleme işlemi gerekir. Bu işlemler normal bir şekilde, DataTables kullanmadan yapılırsa ortaya mükerrer bir kod yığını ve karmaşık bir yapı çıkacaktır. Bu durumda projenin boyutu ve anlaşılabilirlik seviyesi yüksek olacaktır. İşte bu tür durumların önüne geçmek için datatable kütühanesini, tablosunu kullanırız. DataTables kütüphanesi bir tabloda olması gereken her türlü özelliği kullanıcalara sunar. En önemli özelliği filtereleme, arama gibi özelliklerini kullanırken bu işlemleri Ajax kullanarak yapar ve sayfa yenilenmez.

Django Datatable Kullanımı

DataTable Nasıl Kullanılır?

Eğer dinamik olmayan bir tablo, kayıtları elle girmek istiyorsanız, kullanımı oldukça basittir. İlk olarak JS ve CSS dosyalarını Html dosyamıza import ediyoruz.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css">

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>

Artık kullanım için hazırız! Normal Html tablosunu oluşturup, id değeri vermeniz gerekiyor.

<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>

Sonra bu tabloyu DataTable Tabloya çevirmemiz gerekiyor. Bu aşamada <script> etiketleri arasında ID vererek eşleme işlemi yapıyoruz.

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

Dinamik veri olmadan static veri kullanımı bu kadar basit aslında. Haydi o zaman gelin birlikte Django kullanırken dinamik verilerle DataTable tablosu nasıl doldurulur ona bakalım. Haydiiiii!

Django DataTable Nasıl Kullanılır?

 post = request.POST
 query = post.get("search[value]")
 start = abs(int(post.get("start", 0)))
 size = abs(int(post.get("length", 10)))
 draw = abs(int(post.get("draw", 1)))

Datatable bize bazı değerleri post işlemi olarak gönderir tabi daha Html kısmını kodlamadık ama bu şekilde bir post değeri döndürüyor bize.

columns = [
        'name', 'site_name'
    ]

Tablomuzda kullanıdığımız sütun adlarını sıralama işlemi(OrderBy) bir liste içinde tutuyoruz. Veritabanında hangi isimle kayıtlı ise o isimle tutuyoruz. Hangi alanları gönderdiyseniz o alanları eklemeniz veya sıralamasını istemediğiniz değer yerini çift tırnak olarak boş bir isim verebilirsiniz.

order_by = post.get('order[0][column]')
order_by_dir = post.get('order[0][dir]')

order_by değerini ve order_by_dir değerini DataTable gönderiyoru onları da alıyoruz.

companies = Company.objects.filter().order_by("-id")

if query:
   companies = companies.filter(name__icontains=query)

if order_by:
   companies = companies.order_by(order_by_dir + columns[int(order_by)])

Company tablomuzda ki kayıtları varsayılan olarak “id” sıralamasına tabi tutarak companies listesine atıyoruz. Eğer query değeri geliyorsa filtreleme işlemini yapıyoruz, order_by değeri geliyorsa aynı şekilde sıralama işlemini yapıyoruz.

total_count = companies.count()

companies = companies[start:end]

datas = []
if companies:
   for c in companies:
       datas.append({
         "name": c.name,
         "site_name": c.site_name
         ...
         ...
         })


data = {
        "data": datas,
        "recordsTotal": total_count,
        "recordsFiltered": total_count,
        "draw": draw
    }

companies listesinde olan kayıt adetini alıp, total_count’a atıyoruz. companies = companies[start:end] uygulayarak istediğimiz kayıt aralığını aldığımız değerlere göre uyguluyoruz. 1 ile 10 arasında, 20 ile 99 arasında ki kayıtları companies listesine yaz şeklinde.

Companies değişkenini for döngüsüne alıp, verilerimizi ajax kullanımda anlattığım şekilde, dict’e yazıyoruz. Burada verdiğiniz isimlendirmeleri html’de alırken kullanacağız.

Son olarak data dizi listesi oluşturup, verilerimi, toplam kayıt adetlerini ve draw’ı içine atıyoruz ve JsonResponse(data) diyerek isteğin geldiği kod bloğuna dizimizi gönderiyoruz.

Django Datatable Kullanımı öğrenimde View kısmında işlemlerimizi bitirdik, şimdi birlikte HTML kısmını kodlayalım. Zor olan kısım bitti şimdi sadece verilerimizi dinamik bir şekilde Datatable’ye aktaracağız.

<table id="datatable"></table>

Boş olarak ID değerini verdiğimiz tabloyu oluşturuyoruz. Dilerseniz class uygulayabilirsiniz. Normal bir tablonunun tüm işlemlerini kullanabilirsiniz. Pirinç’e giderken eldeki bulgurdan olmadınız :’)

Django Datatable Kullanımı

Verilerimizi bu şekilde aktarıyoruz ve tablomuza yazıyoruz, eee başkan bir kopyalama işlemi yapmayalım mı resim olarak yüklemişsin demeyin! Aşağıya kod bloğunu bırakıyorum, sakin ol Champ! :’)

$(document).ready(function(){
      //pelerinkutusu.com
      var table = $('#datatable').DataTable({ //id değerini vermeyi unutmayın
        dom: 'lBfrtip', 
        responsive: true,
        processing: true,
        serverSide: true,
        minLength: 2, //Minimum kayıt
        ajax: {
          url: "{% url 'company-list-search' %}", //istek atılacak url
          type: "POST"//POST işlemi olmak zorunda!
        },
        columnDefs: [
          { "targets": 0, "title": "Company Name" },//Sütun Adı 1
          { "targets": 1, "title": "Site Name" }, //Sütun Adı 2
        ],
        columns: [
          { data: 'name' },//1. Sütunun datası
          { data: 'site_name' },//2. sütunun datası
          //view'den nasıl gönderdiysek o şekilde kullanmalıyız.
        ]
      });
    });

Django Datatable Kullanımı içim tüm işlemlerimizi bitirdik haydi birlikte test edelim!!

Django Datatable Kullanımı
Verilerimiz tabloya işleniyor.
Django Datatable Kullanımı
Arama işlemini kullanabiliyoruz.
Django Datatable Kullanımı
Sıralama işlemini kullanabiliyoruz.

Kısaca Django Datatable Kullanımı bu şekilde arkadaşlar, elimden geldiğince ve klavyem döndüğünce size anlatmaya çalıştım. Aklınıza takılan soruları ve düşüncelerinizi bizimle paylaşabilirsiniz. :’) İyi kodlamalarrr !

Yorum Yap

Yazar Hakkında

Yorum Yap