How to apply Datatables plugin to a rendered django-tables2?

Question

Problem implementing of Datatables plugin to a 'Django-tables2' rendered table.

I'm beginner at Django; I'm working on an app that shows data upload to the database (postgresql), looking for solution to the high time to render the table with many data through a normal django CVB, I found django-tables2. I have been able to implement it and show the render table (with an important improvement on load speed), additionally, for all my tables I have implemented 'Datatables' plugin and some agregates, but I have not unscrambled how to make them work with the table rendered with django-tables2 as those do with all my other data tables (not rendered by django-tables2); until the moment the only part that partially works is the CSS, but the responsive and colReorder doesn´t work.

I have tried to specify 'static' files routes directly in the template as official documentation explains but it does not work.

The HTML template I'm using inherit form a 'base' template that implements all the css/js static files and overwrites a content block where is the place the data table is rendered.

As reference my code is:

Views.py

class Data_t_zq70(tables.Table):
    class Meta:
        model = datos
        attrs = {
            'class': 'table table-sm text-center table-striped table-
bordered table-hover id=dataTable'}
        fields = ['Insp_Lot', 'Description', 'Date', 'Material',
        'Batch', 'Mean_Valuation', 'Mean', 'Lower_Limit', 'Target',
        'Upper_Limit', 'Delvry_Quantity']
per_page = 10

class zq_70(LoginRequiredMixin, SingleTableView):
    model = datos
    table_class = Data_t_zq70
    template_name = 'data_list_zq70.html'
    login_url = 'base:login'

HTML Template:

{% extends 'base/base.html' %}
{% load static %}
{% load django_tables2 %}
{% block contenido %}
<div class="panel panel-info">
    <div class="panel-heading">
        <a href="{% url 'data:data_upload' %}" class="btn btn-
               info"><span class="fa fa-plus-circle"> <strong>
                              Cargar datos</strong></span></a>
    </div>
    <div class="panel-body">
                    {% render_table table %}
    </div>
</div>
{% endblock contenido %}

Despite the datatable is rendered some elements from 'datatables' plugin are not showed like 'search' box, 'show xx entries' box, etc.

Other tables rendered with Datatables plugin

Table rendered with Django-tables2

score 2 · Accepted Answer · answered Jan 26 '19 at 20:33

datatables requires different html elements to be present compared to the table templates django-tables2 provides. I think implementing a custom template derive off of one of the supplied templates adding the elements required for datatables is the way to go.

django-tables2 might not be the best solution to render datatables-tables though, did you look into django-datatables-view?

fean · Answer 2 · 2020-10-19T21:11:25.200

I know django-datatables-view can directly be used to render table but if you really want to use the features of datatable using the plugins on top of django-table2, this is how you can write the attrs in table.py.

from django_tables2 import tables
from .models import MyModel

class MyModelTable(tables.Table):

    class Meta:
        model = MyModel

        # This is a hack for using datatable at the frontend
        attrs = {
            'id' : 'example',  #Rename the value to match with datatable id
            'class': 'display', #Change this class value according to the documentation
            'style': 'width:100%'
            }

And include the databale specific css/js to your html template.

Again, this is definitely not an ideal way to use datatable in django but have fun!

How to apply Datatables plugin to a rendered django-tables2?

2 Answers2