filter the table

rescuer/templates/rescuer/rescuer_all.html

@@ -1,5 +1,34 @@
 {% extends "base.html" %}
 {% load static %}
+{% block header %}
+<!-- Datatable CSS -->
+<link  rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css"/>
+<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap5.min.css">
+
+<!-- jQuery -->
+<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
+
+<!-- Datatable jQuery -->
+<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
+<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
+<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
+<script src="https://cdn.datatables.net/responsive/2.2.9/js/responsive.bootstrap5.min.js"></script>
+
+<script>
+  $(document).ready(function () {
+    $('#t__rescuer_all').DataTable({
+      language: {
+        url: 'https://cdn.datatables.net/plug-ins/1.11.3/i18n/de_de.json',
+      },
+      responsive: true,
+      columnDefs: [
+          { responsivePriority: 1, targets: 0 },
+      ]
+    })
+  })
+</script>
+
+{% endblock header %}
 {% block content %}
 <h3>Übersicht aller Retter</h3>
 <p>
@@ -9,7 +38,7 @@
     <a href="{% url 'rescuer_create' %}" class="btn btn-primary">Einen neuen Retter anlegen</a>
 </p>
 
-<table class="table table-striped table-hover" id="t__resuer_all">
+<table class="table table-striped table-hover" id="t__rescuer_all">
     <thead>
       <tr>
         <th>Name</th>