'Django_Tables2 Not Loading Default Bootstrap Styles
I am following the tutorial on django-tables2 website (https://django-tables2.readthedocs.io/en/latest/pages/tutorial.html) and I am unable to get my tables to display using bootstrap styles. I followed the exact tutorial and was successful in getting bootstrap styled tables, however, when implementing within my main project, it keeps the base formatting without bootstrap.
Here is my html that includes the table:
{% extends 'base.html' %}
{% block title %}Home{% endblock %}
{% block extra_head %}
<link rel="stylesheet" type="text/css" href="/adminEdits/tatic/mainStyles.css" />
<script type="text/javascript" src="/static/scripts.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
{% endblock %}
{% block content %}
{% if user.is_authenticated %}
{% load render_table from django_tables2 %}
<h1>Edit Drivers</h1>
{% render_table table %}
{% else %}
<p>You are not logged in</p>
<a href="{% url 'login' %}">login</a>
{% endif %}
{% endblock %}
And my tables.py
import django_tables2 as tables
from tickets.models import User
class UsersTable(tables.Table):
class Meta:
model = User
template_name = "django_tables2/bootstrap.html"
fields = ("user_id",)#"first_name", "last_name", "position", "admin_level", "email", "distribution_company_id")
And my views.py
from django_tables2 import SingleTableView
from django.shortcuts import render, get_object_or_404
from django.http import HttpResponse, Http404
from django.views.generic import ListView
from tickets.models import User
from .tables import UsersTable
# Create your views here.
def index(request):
return render(request, 'adminEdits/index.html', context)
class UsersListView(SingleTableView):
model = User
table_class = UsersTable
template_name = 'adminEdits/editDrivers.html'
And my urls.py for the application:
from django.urls import path
from adminEdits.views import UsersListView
from . import views
urlpatterns = [
path('', views.index, name='index'),
path('drivers', UsersListView.as_view()),
]
If I edit my html page and remove the base html that is being extended, then the bootstrap styling works properly.
Solution 1:[1]
I was able to solve this by
- Running
collectstatic(oops) - Adding
DJANGO_TABLES2_TEMPLATE = "django_tables2/bootstrap4.html"to my base settings.py (this can be specified in several places of course) - Adding
attrsto thetables.pyclass. Interestingly I was never able to get the paleblue class to work.
class PersonTable(tables.Table):
class Meta:
model = Person
attrs = {"class": "table thead-light table-striped table-hover"}
fields = (...)
Solution 2:[2]
I was able to solve this by changing from extending a base.html file and instead dropping the base html code into a seperate file that I could drop directly in using {% include header.html %}. This allowed me to put
{% load render_table from django_tables2 %}
at the top of the page and be able to force it to the first thing loaded in the html, while still being able to include other files in.
To get the base.html file working properly while extending, all I had to do was add the bootstrap stylesheet link to the base.html. With that in there, everything works without having to import other files in.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | StackTheEast |
| Solution 2 |
