Improved part tables.

assets/js/app.js

@@ -17,8 +17,9 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import '@fortawesome/fontawesome-free/css/all.css'
 
 import 'datatables.net-bs4/css/dataTables.bootstrap4.css'
-
 import 'datatables.net-buttons-bs4/css/buttons.bootstrap4.css'
+import 'datatables.net-fixedheader-bs4/css/fixedHeader.bootstrap4.css'
+import 'datatables.net-select-bs4/css/select.bootstrap4.css'
 
 //require( 'jszip' );
 //#require( 'pdfmake' );

config/packages/datatables.yaml

@@ -7,7 +7,9 @@ datatables:
     options:
         lengthMenu : [10, 25, 50, 100, 250, 500, 1000, 2500]
         pageLength: 50
-        dom: "<'row' <'col-sm-12' tr>><'row' <'col-sm-6'l><'col-sm-6 text-right'pi>>"
+        #dom: "<'row' <'col-sm-12' tr>><'row' <'col-sm-6'l><'col-sm-6 text-right'pif>>"
+        pagingType: 'simple_numbers'
+        searching: true
 
     template_parameters:
         # Example classes to integrate nicely with Bootstrap 3.x

public/helper/datatables.js

@@ -54,7 +54,7 @@
                             data.draw = request.draw;
                             drawCallback(data);
                             data = null;
-                            if (Object.keys(state).length) {
+                            if (Object.keys(state).length && dt.state != null) {
                                 var merged = $.extend(true, {}, dt.state(), state);
                                 dt
                                     .order(merged.order)

templates/parts_list.html.twig

@@ -2,17 +2,28 @@
 
 {% block content %}
 
-    <div id="part_list">
+    <div class="card border-primary">
+        <div class="card-header bg-primary text-white">
+            <h6>Bauteile</h6>
+        </div>
+        <div id="part_list" class="table-responsive">
+            <div class="card-body">
                 <h4>{% trans %}part_list.loading.caption{% endtrans %}</h4>
                 <h6>{% trans %}part_list.loading.message{% endtrans %}</h6>
             </div>
+        </div>
+    </div>
 
 {% endblock %}
 
 {% block scripts %}
     <script>
         $( function() {
-            $('#part_list').initDataTables({{ datatable_settings(datatable) }});
+            $('#part_list').initDataTables({{ datatable_settings(datatable) }},
+                {
+                    "fixedHeader": { header: $(window).width() >= 768, //Only enable fixedHeaders on devices with big screen. Fixes scrolling issues on smartphones.
+                        headerOffset: $("#navbar").height()}
+                });
         });
     </script>
 {% endblock %}