make table readable

templates/stat.boats.html.tera

@@ -1,24 +1,44 @@
 {% import "includes/macros" as macros %}
 {% extends "base" %}
 {% block content %}
+    <style>
+	.dt-input {
+		color: black;
+	}
+	.dt-selector {
+		width: 70px;
+	}
+	.dt-table th{
+	min-width: 100px;
+	}
+	.dt-table td {
+		border: 1px gray solid;
+	}
+}
+    </style>
     <div class="max-w-screen-lg w-full">
         <h1 class="h1">Bootsauswertung</h1>
-        <table id="basic">
+        <div class="text-black dark:text-white">
-            <thead>
+            <table id="basic">
-                <tr>
+                <thead>
-                    <th>Name</th>
-                    <th>Ort</th>
-                    {% for year in stat.pot_years | sort | reverse %}<th>{{ year }}</th>{% endfor %}
-                </tr>
-            </thead>
-            <tbody>
-                {% for boat in stat.boats %}
                     <tr>
-                        <td>{{ boat.name }}</td>
+                        <th>Name</th>
-                        <td>{{ boat.location }}</td>
+                        <th>Ort</th>
-                        {% for year in stat.pot_years | sort | reverse %}
+                        {% for year in stat.pot_years | sort | reverse %}<th>{{ year }}</th>{% endfor %}
-                            <td>
+                    </tr>
-                                {% if year~'' in boat.years %}{{ boat.years[year] }}{% endif %}
+                </thead>
+                <tbody>
+                    {% for boat in stat.boats %}
+                        <tr>
+                            <td>{{ boat.name }}</td>
+                            <td>{{ boat.location }}</td>
+                            {% for year in stat.pot_years | sort | reverse %}
+                                <td>
+                                    {% if year~'' in boat.years %}
+                                        {{ boat.years[year] }}
+                                    {% else %}
+                                        0
+                                    {% endif %}
                                 </td>
                             {% endfor %}
                         </tr>
@@ -26,6 +46,14 @@
                 </tbody>
             </table>
         </div>
-        <script src="/public/jstable.min.js"></script>
+    </div>
-        <script>new JSTable("#basic");</script>
+    <script src="/public/jstable.min.js"></script>
-    {% endblock content %}
+    <script>new JSTable("#basic", {
+		perPage: 100,
+		perPageSelect: [10,100],
+		labels: {
+			placeholder: 'Suchen (zB "Linz")'
+		}
+	});
+    </script>
+{% endblock content %}