Как реализовать DataTable в проекте Django?

Я новичок в Django framework и пытаюсь внедрить datatable в свой проект. Я прочитал документацию по Django и Datatables и реализовал все в точности как указано, но почему-то datatable не отображается в шаблоне и я не знаю почему.

home.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Django Project</title>
    {% include 'headers.html' %}
    
    {% include 'scripts.html' %}
  </head>
  <body class="hold-transition sidebar-mini layout-fixed">

    <div class="wrapper">

      {% include 'header.html' %}


      {% include 'sidebar.html' %}

      <div class="content-wrapper">
        <section class="content-header"></section>

        <section class="content">
          {% block content %} {% endblock content %}
        </section>
      </div>

      {% block javascript %}

      {% endblock %}

      {% include 'footer.html' %}

      <aside class="control-sidebar control-sidebar-dark"></aside>
    </div>
  </body>
</html>

headers.html

{% load static %}


<!-- DataTables -->
<link
  rel="stylesheet"
  href="{% static 'lib/bootstrap-5.1.1-dist/css/bootstrap.min.css' %}"
/>
<link
  href="{% static 'lib/datatables-1.11.2/css/jquery.dataTables.min.css' %}"
/>
<link
  rel="stylesheet"
  href="{% static 'lib/datatables-1.11.2/css/dataTables.bootstrap4.min.css' %}"
/>
<link
  rel="stylesheet"
  href="{% static 'lib/datatables-1.11.2/css/responsive.bootstrap4.min.css' %}"
/>

<!-- Google Font: Source Sans Pro -->
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"
/>
<!-- Font Awesome -->
<link
  rel="stylesheet"
  href="{% static 'lib/adminlte-3.1.0/plugins/fontawesome-free/css/all.min.css' %}"
/>
<!-- overlayScrollbars -->
<link
  rel="stylesheet"
  href="{% static 'lib/adminlte-3.1.0/plugins/overlayScrollbars/css/OverlayScrollbars.min.css' %}"
/>
<!-- Theme style -->
<link
  rel="stylesheet"
  href="{% static 'lib/adminlte-3.1.0/css/adminlte.min.css' %}"
/>

scripts.html

{% load static %}
<script src="{% static 'lib/bootstrap-5.1.1-dist/js/bootstrap.bundle.min.js' %}"></script>

<script src="{% static 'lib/bootstrap-5.1.1-dist/js/jquery-3.6.0.min.js' %}"></script>

<script src="{% static 'lib/datatables-1.11.2/js/jquery.dataTables.min.js' %}"></script>

<script src="{% static 'lib/datatables-1.11.2/js/dataTables.bootstrap4.min.js' %}"></script>

<script src="{% static 'lib/datatables-1.11.2/js/dataTables.responsive.min.js' %}"></script>

<script src="{% static 'lib/datatables-1.11.2/js/responsive.bootstrap4.min.js' %}"></script>

<script src="{% static 'lib/adminlte-3.1.0/plugins/jquery/jquery.min.js' %}"></script>

<script src="{% static 'lib/adminlte-3.1.0/plugins/bootstrap/js/bootstrap.bundle.min.js' %}"></script>

<script src="{% static 'lib/adminlte-3.1.0/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js' %}"></script>

<script src="{% static 'lib/adminlte-3.1.0/js/adminlte.min.js' %}"></script>

<script src="{% static 'lib/adminlte-3.1.0/js/demo.js' %}"></script>

Я изменил библиотеки bootstrap с 5 на 4, чтобы проверить, работает ли это, но это не помогло.

list.html (Это общий шаблон списка)

{% extends 'home.html' %}

{% block content %}
<div class="card card-default">
  <div class="card-header">
    <h3 class="card-title">
      <i class="fas fa-search"></i>
        {{ title }}
    </h3>
  </div>
  <div class="card-body">
    <table class="table" id="categories">
      <thead>
      {% block columns %}

      {% endblock %}
      </thead>
      <tbody>
      {% block rows %}

      {% endblock %}
      </tbody>
    </table>
  </div>
  <div class="card-footer">
    <button type="button" class="btn btn-primary btn-flat"><i class="fas fa-plus"></i>New Category</button>
  </div>
</div>
{% endblock %}

{% block javascript %}
  <script type="application/javascript">
    $(function (){
      $('#categories').DataTable();
    });
  </script>
{% endblock %}

list.html (Этот шаблон содержит колонки и строки и имеет другой путь)

{% extends 'list.html' %}

{% block columns %}
    <tr>
        <th scope="col">ID</th>
        <th scope="col">Name</th>
        <th scope="col">Action</th>
    </tr>
{% endblock %}
{% block rows %}
    {% for c in object_list %}
    <tr>
        <td>{{c.id}}</td>
        <td>{{c.name}}</td>
        <td>
            <button type="button" class="btn btn-danger"><i class="fas fa-trash"></i></button>
            <button type="button" class="btn btn-warning"><i class="fas fa-edit"></i></button>
        </td>
    </tr>
    {% endfor %}
{% endblock %}

Таблица выглядит следующим образом.