Add paging, Change language to german

src/static/css/floating_labels.css

@@ -127,6 +127,11 @@
 /*.dataTables_length, .dataTables_info, .dataTables_paginate {*/
 /*!*visibility: hidden*!*/
 /*}*/
+
+.paginate_button {
+    padding: 0px 2px
+}
+
 @media (max-width: 480px) {
     .table-search-field {
         width: 100% !important;

src/static/js/main.js

@@ -4,15 +4,27 @@ const TABLE_CLASS = '.data-table';
 $(document).ready(function () {
     // if ($(TABLE_CLASS)) {
     const data_table = $(TABLE_CLASS).DataTable({
-        "lengthMenu": [[-1], ["All"]],
+        "paging": true,
-        "bPaginate": true,
         "pageLength": 10,
+        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Alle"]],
         // "sPaginationType": "custom",
-        "dom": 'itlp',
+        "dom": 'lt<"mb-3 float-left" i><"float-right"p><"clearfix">',
-        // "paginate": {
+        "oLanguage": {
-        //     next: '<i class="fas fa-arrow-alt-circle-right"></i>',
+            "sEmptyTable": "Keine Daten verfügbar",
-        //     previous: '<i class="fas fa-arrow-alt-circle-left"></i>'
+            "sInfo": "_START_ - _END_ von _TOTAL_",
-        // },
+            "sInfoEmpty": "Keine Eintäge gefunden",
+            "sLengthMenu": "Zeige _MENU_ Einträge",
+            "oPaginate": {
+                "sFirst": "First page",
+                "sLast": "Last page",
+                "sNext": "<i class=\"fas fa-arrow-alt-circle-right\"></i>",
+                "sPrevious": "<i class=\"fas fa-arrow-alt-circle-left\"></i>",
+            },
+            "oAria": {
+                "sSortAscending": " - click/return to sort ascending",
+                "sSortDescending": " - click/return to sort descending",
+            },
+        },
         rowReorder: {
             selector: true,
         },

src/templates/macros/utils_macros.jinja2

@@ -56,7 +56,7 @@
 {% endmacro %}
 
 {% macro get_realm_table(realms) -%}
-    <div class="form-group w-25 float-right">
+    <div class="table-search-field form-group w-25 float-right">
         <input type="text"
                class="form-control"
                id="data-table-search-input">