make table readable

templates/stat.boats.html.tera

@@ -1,8 +1,24 @@
 {% 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>
+        <div class="text-black dark:text-white">
             <table id="basic">
                 <thead>
                     <tr>
@@ -18,7 +34,11 @@
                             <td>{{ boat.location }}</td>
                             {% for year in stat.pot_years | sort | reverse %}
                                 <td>
-                                {% if year~'' in boat.years %}{{ boat.years[year] }}{% endif %}
+                                    {% if year~'' in boat.years %}
+                                        {{ boat.years[year] }}
+                                    {% else %}
+                                        0
+                                    {% endif %}
                                 </td>
                             {% endfor %}
                         </tr>
@@ -26,6 +46,14 @@
                 </tbody>
             </table>
         </div>
+    </div>
     <script src="/public/jstable.min.js"></script>
-        <script>new JSTable("#basic");</script>
-    {% endblock content %}
+    <script>new JSTable("#basic", {
+		perPage: 100,
+		perPageSelect: [10,100],
+		labels: {
+			placeholder: 'Suchen (zB "Linz")'
+		}
+	});
+    </script>
+{% endblock content %}