Create datatable based on dataTable class instead of table class

core/admin/assets/app.js

@@ -11,7 +11,7 @@ jQuery("document").ready(function() {
         tags: true,
         tokenSeparators: [',', ' ']
     });
-    jQuery(".table").DataTable({
+    jQuery(".dataTable").DataTable({
         "responsive": true,
     });
 });

core/admin/mailu/ui/templates/client.html

@@ -9,8 +9,7 @@ configure your email client
 {% endblock %}
 
 {% block content %}
-{% call macros.card(title="Incoming mail") %}
-<table class="table table-bordered">
+{% call macros.table(title="Incoming mail", datatable=False) %}
   <tbody>
     <tr>
       <th>{% trans %}Mail protocol{% endtrans %}</th>
@@ -33,11 +32,9 @@ configure your email client
       <td><pre>*******</pre></td>
     </tr>
   </tbody>
-</table>
 {% endcall %}
 
-{% call macros.card(title="Outgoing mail") %}
-<table class="table table-bordered">
+{% call macros.table(title="Outgoing mail", datatable=False) %}
   <tbody>
     <tr>
       <th>{% trans %}Mail protocol{% endtrans %}</th>
@@ -60,6 +57,5 @@ configure your email client
       <td><pre>*******</pre></td>
     </tr>
   </tbody>
-</table>
 {% endcall %}
 {% endblock %}

core/admin/mailu/ui/templates/domain/details.html

@@ -21,7 +21,7 @@
 {% endblock %}
 
 {% block content %}
-{% call macros.table() %}
+{% call macros.table(datatable=False) %}
 {% set hostname = config["HOSTNAMES"].split(",")[0] %}
 <tr>
   <th>{% trans %}Domain name{% endtrans %}</th>

core/admin/mailu/ui/templates/macros.html

@@ -83,14 +83,17 @@
 </div>
 {% endmacro %}
 
-{% macro table(theme="primary") %}
+{% macro table(title=None, theme="primary", datatable=True) %}
 <div class="row">
   <div class="col-lg-12">
     <div class="card card-outline card-{{ theme }}">
       <div class="card-header border-0">
+        {% if title %}
+        <h3 class="card-title">{{ title }}</h3>
+        {% endif %}
       </div>
       <div class="card-body">
-        <table class="table table-bordered">
+        <table class="table table-bordered {% if datatable %} dataTable {% endif %}">
           {{ caller() }}
         </table>
       </div>