Django DataTable Nedir ve Kullanımı 2023

KıvırcıkNisan 16, 2023

0 45 3 dakika okuma süresi

Django DataTable nedir ve kullanımı 2023 | Bu metinde her şeyi adım adım yazmayacağım. Adım adım yazmak yerine DataTables.js kullanılarak oluşturulan dinamik veri tablolarını implemente etmek için neler yaptığımı birkaç satırda anlatacağım.

Verilerimizi tabloda göstermek için aşağıdaki işlemleri tamamlamamız gerekiyor:

urls.py dosyasında Json yanıtımız için bir url bitiş noktası oluşturun
Views.py dosyamızda Json yanıtını oluşturun
url ve görünüm ile yeni bir html şablonu oluşturma
Json Yanıtını Test Etme
Verileri tablomuzdaki tablomuza bağlayın

Django Datatable Model yapımız

Bu özel dizide stadyumları, kapasiteleri ve özellikleri ile çok küçük bir futbol kulübü veri seti kullanıyorum. Tabloyu oluşturmak için kullanacağımız modele Tabledata adı verilir .

models.py 
class TableData(models.Model):
    name = models.CharField(max_length=200, unique=True)
    attendance = models.IntegerField(blank=True, null=True)
    stadium = models.CharField(max_length=200,blank=True, null=True)
    characteristics = models.ManyToManyField(Characteristics,blank=True, null=True)
    created_at = models.DateTimeField(auto_now_add=True)
    edited_at = models.DateTimeField(auto_now=True)

    def __str__(self):
        return self.name

Django Datatable urls.py Yapısı

urls.py 

from django.contrib import admin
from django.urls import path, include
from table import views as view


urlpatterns = [
    path('table1/', view.table1, name='table1'),
    path('multiplechoicefield/', view.modelmultiplechoicefield, name='modelmultiplechoicefield'),
    path('', view.home, name='home'),
    path('jsonresponse/footballclubs', view.footballclubs, name='footballclubs'),
]

Django Datatable View Json gönderme

Ardından, Json yanıtını oluşturacağımız futbol kulüpleri adlı bir görünüm oluşturmamız gerekiyor . Views.py dosyamızın üstüne Json yanıt paketini içe aktarıyoruz. İçe aktarmanın altına yanıtımızın mantığını yazıyoruz. Görünümde, TableData nesnelerimizi temel alan bir liste oluşturuyoruz. .values() komutu ile cevaba dahil etmek istediğimiz alanları belirtebiliriz.

views.py 

from django.http import JsonResponse

def footballclubs():
    result_list = list(TableData.objects.all()\
                .values('name', 
                        'attendance',
                        'stadium',

                        'created_at',
                        'edited_at',
                        'id',
                       ))
  
    return JsonResponse(result_list, safe=False)

Django Datatable HTML Yapısı

Yeni tablomuz için view ve url ile yeni bir html dosyası oluşturacağım . İlk önce table2.html adında bir şablon oluşturuyoruz

table2.html
{% extends 'table/base.html' %}
{% block content %}
    <div class="pageholder">
        <div class="titleholder"> 
            <a class="ourbutton mr-2 ml-2" href="{% url 'home'%}"> To home</a>
            <div class="title"><i class="fa-solid fa-table"></i> Table from our second tutorial! </div> 
        </div>

        <div class="linkholder">

        </div>
    </div>



{% endblock %}

İkinci olarak, html şablonunu belirttiğimiz şablon için görünüm oluşturuyoruz .

views.py 

def table2(request):
    context = {}
    return render(request, 'table/table2.html',context)

Son olarak, url’lerdeki görünümümüz için bir url uç noktası (aşağıda yeşil) oluşturuyoruz . py dosyası.

path('table2/', view.table2, name='table2')

Django Datatable Json değerlerini gösterme

Şimdi şablonumuzda Json yanıtımızın çalışıp çalışmadığını test edeceğiz. Bunu bir Ajax çağrısı ile yapıyoruz. Aşağıdaki kod satırlarını base.html dosyanıza veya html dosyanızın üstüne ekleyin (benim durumumda table2.html).

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

Aşağıdaki komut dosyasını html dosyanızın altına ekleyin . Scriptte urls.py dosyasında belirttiğimiz isme (futbol kulüpleri) atıfta bulunuyoruz. Bu betik verilerimizi getirecek.

table2.html

<script>
    $.ajax({
        url: "{% url 'footballclubs'%}",
        method: 'GET',
        success: function (data) {
            console.log('our data',data);
        }
    });
</script>

Sunucumuzu başlattığımızda ve konsolumuza eriştiğimizde ( kontrol+shift+j) verileri göreceğiz! Bu, çalıştığı anlamına gelir.

Django Datatable Veri Doldurma

Json yanıtı da dahil olmak üzere DataTable’ı şablonumuza eklemenin zamanı geldi . Tablo2.html dosyamızın tamamı aşağıda gösterilmektedir.

Tablo içerisinde sadece tablo başlığını belirtmemiz yeterlidir. Sütunlar betiklerimizde görüntülenecektir. Kimlik bizim tablomuz2’dir. Tabloda aynı kimliği kullandığınızdan emin olun.
Javascript alanında bir ajax yanıtı yerleştiriyoruz ve kolonu belirtebiliyoruz. Değerler listenizde (ve modellerde) tam olarak belirtilen adları kullandığınızdan emin olun.

Yani sayfanın son hali bu olacak;

table2.html 

{% extends 'table/base.html' %}
{% block content %}
    <div class="pageholder">
        <div class="titleholder"> 
            <a class="ourbutton mr-2 ml-2" href="{% url 'home'%}"> To home</a>
            <div class="title"><i class="fa-solid fa-table"></i> Table from our second tutorial! </div> 
        </div>

        <div class="linkholder">
            <table id="ourtable2" class="beheertable dezetabel">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Stadium</th>
                        <th>Attendance</th>
                        <th>Created at</th>
                        <th>Edited at</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>


<script>
    $(document).ready(function() {
        var table = $('#ourtable2').DataTable({
           "ajax": {
              "processing": true,
              "url": "{% url 'footballclubs' %}",
              "dataSrc": "",
            },
            "columns": [
                    { "data": "name"},
                    { "data": "stadium"},
                    { "data": "attendance"},
                    { "data": "created_at"},
                    { "data": "edited_at"},
                ],
        });
    });
</script>
{% endblock %}

Her şey hazır!

Görevimizi tamamladık! Veritabanındaki veriler artık tablomuzda görüntüleniyor. Tabii tabloya baktığınızda hala düzeltmemiz gereken şeyler var. Örneğin, tarihlerimiz garip bir biçimde görüntüleniyor. Ek olarak, kayıt başına birden çok yanıtı olan özellikler özniteliğimizi de görüntülemek istiyorum

Django DataTable nedir ve kullanımı yazımızı sonlandırıyoruz. Okuduğunuz için teşekkürler.

Kıvırcık yazılımcı olarak Django DataTable nedir ve kullanımı 2023 konusuna çözüm bulmaya çalıştık. Dilerseniz soru cevap sitemizde bu durumu paylaşabilirsiniz.

Etiketler: