แนะนำการใช้ django-tables2 library

February 27th, 2017
แนะนำการใช้ django-tables2 library

django-tables2 library เป็น Django library หลักๆ เลยคือ เอามาใช้ทำตาราง ที่เราสามารถเอาข้อมูลมาจาก database ได้เลย โดยที่เราไม่ต้องมานั่งจัด format ตารางและ filter objects เอง และยังมีความสามารถทำลิงค์ edit/delete ให้กับ object นั้นได้ด้วย อารมณ์เหมือนทำหน้า django admin เอง และยัง support การทำ queryset ด้วย คือทำตารางตาม query ที่เราต้องการได้อย่างง่ายๆ เลย

table_example

การใช้งาน django-tables2 แบบพื้นฐาน

สมมติว่ามี model people แล้วจะทำตาราง ในส่วน view ก็แค่ส่งข้อมูลไป render ใน template
# tutorial/views.py
from django.shortcuts import render

def people(request):
return render(request, 'people.html', {'people': Person.objects.all()})

ในตัว template ก็ใส่ {% render_table people %}

{# tutorial/templates/people.html #}
{% load render_table from django_tables2 %}
{% load static %}
{% render_table people %}

ทำแค่นี้ ก็ออกมาเป็นตารางได้แล้ว

Custom ตารางอย่างง่ายๆ

ถ้าอยากจะใส่ class หรือ attributes ให้กับตารางที่เราทำ ก็ให้สร้างไฟล์ tables.py แบบนี้

# tutorial/tables.py
import django_tables2 as tables
from .models import Person

class PersonTable(tables.Table):
    class Meta:
        model = Person
        # add class="paleblue" to table tag
        attrs = {'class': 'paleblue'}

และตอนส่งไปให้ template แทนที่จะส่ง queryset ไป ก็ส่ง tables ที่รับ queryset แล้ว

# tutorial/views.py
from django.shortcuts import render
from django_tables2 import RequestConfig
from .models import Person
from .tables import PersonTable

def people(request):
    table = PersonTable(Person.objects.all())
    RequestConfig(request).configure(table)
    return render(request, 'people.html', {'table': table})

ทำ Edit, Delete link ของแต่ละ row

ก็ง่ายมากกก อีกแล้ว ใช้สิ่งที่เรียกว่า LinkColumn แล้วใส่ reverse url เข้าไปยัง view ที่เราเขียนไว้ และใส่ primary key (ไม่ได้เขียนตัวอย่าง view ไว้ให้นะจ้ะ) ถ้าในตัวอย่างคือเรามี person_edit และ person_delete views ไว้แล้ว

# tutorial/tables.py
import django_tables2 as tables
from .models import Person

class PersonTable(tables.Table):
    edit = tables.LinkColumn(
        'person_edit',
        text='Edit',
        args=[A('pk')]
    )
    delete = tables.LinkColumn(
        'person_delete',
        text='Delete',
        args=[A('pk')]
    )
    class Meta:
        model = Person
        # add class="paleblue" to table tag
        attrs = {'class': 'paleblue'}

urls จะหน้าตาประมาณนี้

urlpatterns = [
    url(r'^(?P[0-9]+)/$',
        login_required(PersonEditView.as_view()), name='person_edit'),
    url(r'^(?P[0-9]+)/delete/$',
        login_required(PersonDeleteView.as_view()), name='person_delete'),
]

Orderable

โดยปกติ มันจะ create fields ที่ order ได้บนหัว column มาเลย ถ้าไม่อยากใช้ feature นี้ ก็ให้ set orderable=False

requester = tables.Column(orderable=False)

Date format

ใน field วันที่ สามารถทำ format ได้แบบนี้

due_at = tables.DateColumn(
        format='M d, Y',
        verbose_name=('Due Date'))

Render HTML ให้บางฟิลด์เพิ่ม

เช่น เราอยากให้ field clothing ของเรา แสดงเป็น เสื้อและกางเกงใน field เดียวกัน เราสามารถ override function ใน table class ได้ โดยประกาศ function render_ชื่อฟิลด์ มันจะไป apply การเปลี่ยนแปลงให้ field นั้นเอง เช่น

# tables.py
from django.db.models import F

class PersonTable(tables.Table):
    clothing = tables.Column()

    class Meta:
        model = Person

    def render_clothing(self, record):
        return str(record.shirts + record.pants)

**สำคัญมาก**

โดยปกติ ถ้าฟิลด์ไหนว่าง ตัว django-tables2 จะใส่ - ให้ในตาราง แต่มันจะเป็น - ที่เป็น special character แล้วตอน render content มันจะกลายเป็น อักขระพิเศษที่ไม่สามารถเขียนเทสได้ ให้ set default ให้ field นั้นไปเลย เช่น

requester = tables.Column(default='-')

ยังมีอีกมากมายที่สามารถ customize กับ django-tables2 library นี้ได้ อ่านเพิ่มเติมได้ ที่นี่

เขียน code วันละนิดจิตแจ่มใสนะเฮิฟฟฟฟฟ