[BS5] Replace FooTable with jquery Datatables

data/web/templates/mailbox/page-size.twig

@@ -1,6 +0,0 @@
-<li><a class="dropdown-item" href="#" data-page-size="3">{{ lang.mailbox.table_size_show_n|format(3) }}</a></li>
-<li><a class="dropdown-item" href="#" data-page-size="10">{{ lang.mailbox.table_size_show_n|format(10) }}</a></li>
-<li><a class="dropdown-item" href="#" data-page-size="20">{{ lang.mailbox.table_size_show_n|format(20) }}</a></li>
-<li><a class="dropdown-item" href="#" data-page-size="50">{{ lang.mailbox.table_size_show_n|format(50) }}</a></li>
-<li><a class="dropdown-item" href="#" data-page-size="100">{{ lang.mailbox.table_size_show_n|format(100) }}</a></li>
-<li><a class="dropdown-item" href="#" data-page-size="200">{{ lang.mailbox.table_size_show_n|format(200) }}</a></li>

data/web/templates/mailbox/tab-bcc.twig

@@ -5,12 +5,6 @@
       <div class="btn-group ms-auto d-none d-sm-flex">
         <button class="btn btn-xs btn-success" href="#" data-acl="{{ acl.bcc_maps }}" data-bs-toggle="modal" data-bs-target="#addBCCModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_bcc_entry }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_bcc_table" data-table="bcc_table">{{ lang.admin.refresh }}</button>
-        <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}
-         
-        </button>
-        <ul class="dropdown-menu" data-table-id="bcc_table" role="menu">
-          {% include 'mailbox/page-size.twig' %}
-        </ul>
       </div>
     </div>
     <p style="margin:10px" class="text-muted">{{ lang.mailbox.bcc_info|raw }}</p>
@@ -39,12 +33,6 @@
       <div class="btn-group ms-auto d-none d-sm-flex">
         <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addRecipientMapModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_recipient_map_entry }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_recipient_map_table" data-table="recipient_map_table">{{ lang.admin.refresh }}</button>
-        <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}
-         
-        </button>
-        <ul class="dropdown-menu" data-table-id="recipient_map_table" role="menu">
-          {% include 'mailbox/page-size.twig' %}
-        </ul>
       </div>
     </div>
     <p style="margin:10px" class="text-muted">{{ lang.mailbox.recipient_map_info }}</p>

data/web/templates/mailbox/tab-domain-aliases.twig

@@ -5,17 +5,10 @@
       <div class="btn-group ms-auto d-none d-sm-flex">
         <button class="btn btn-xs btn-success" href="#" data-acl="{{ acl.alias_domains }}" data-bs-toggle="modal" data-bs-target="#addAliasDomainModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_domain_alias }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_aliasdomain_table" data-table="aliasdomain_table">{{ lang.admin.refresh }}</button>
-        <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}
-        </button>
-        <ul class="dropdown-menu" data-table-id="aliasdomain_table" role="menu">
-          {% include 'mailbox/page-size.twig' %}
-        </ul>
       </div>
     </div>
 {#    <div class="mass-actions-mailbox" data-actions-header="true"></div>#}
-    <div class="table-responsive">
-      <table id="aliasdomain_table" class="table table-striped"></table>
-    </div>
+    <table id="aliasdomain_table" class="table table-striped dt-responsive nowrap w-100"></table>
     <div class="mass-actions-mailbox">
       <div class="btn-group">
         <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" id="toggle_multi_select_all" data-id="alias-domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>

data/web/templates/mailbox/tab-domains.twig

@@ -7,14 +7,10 @@
           <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addDomainModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_domain }}</button>
         {% endif %}
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_domain_table" data-table="domain_table">{{ lang.admin.refresh }}</button>
-        <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>
-        <ul class="dropdown-menu" data-table-id="domain_table" role="menu">
-          {% include 'mailbox/page-size.twig' %}
-        </ul>
       </div>
     </div>
 {#    <div class="mass-actions-mailbox" data-actions-header="true"></div>#}
-    <table id="domain_table" class="table table-striped dt-responsive nowrap" style="width:100%"></table>
+    <table id="domain_table" class="table table-striped dt-responsive nowrap w-100"></table>
     <div class="mass-actions-mailbox">
       <div class="btn-group">
         <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" id="toggle_multi_select_all" data-id="domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>

data/web/templates/mailbox/tab-filters.twig

@@ -5,19 +5,13 @@
       <div class="btn-group ms-auto d-none d-sm-flex">
         <button class="btn btn-xs btn-success" href="#" data-acl="{{ acl.filters }}" data-bs-toggle="modal" data-bs-target="#addFilterModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_filter }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_filter_table" data-table="filter_table">{{ lang.admin.refresh }}</button>
-        <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>
-        <ul class="dropdown-menu" data-table-id="filter_table" role="menu">
-          {% include 'mailbox/page-size.twig' %}
-        </ul>
       </div>
     </div>
     <div class="card-body">
       <p class="text-muted">{{ lang.mailbox.sieve_info|raw }}</p><br>
     </div>
 {#    <div class="mass-actions-mailbox" data-actions-header="true"></div>#}
-    <div class="table-responsive">
-      <table class="table table-striped" id="filter_table"></table>
-    </div>
+    <table id="filter_table" class="table table-striped dt-responsive nowrap w-100"></table>
     <div class="mass-actions-mailbox">
       <div class="btn-group" data-acl="{{ acl.filters }}">
         <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" id="toggle_multi_select_all" data-id="filter_item" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>

data/web/templates/mailbox/tab-mailboxes.twig

@@ -5,10 +5,6 @@
       <div class="btn-group ms-auto d-none d-sm-flex">
         <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addMailboxModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_mailbox }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_mailbox_table" data-table="mailbox_table">{{ lang.admin.refresh }}</button>
-        <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>
-        <ul class="dropdown-menu" data-table-id="mailbox_table" role="menu">
-          {% include 'mailbox/page-size.twig' %}
-        </ul>
       </div>
     </div>
     <div class="mass-actions-mailbox d-none d-sm-flex" data-actions-header="true"></div>

data/web/templates/mailbox/tab-mbox-aliases.twig

@@ -5,19 +5,13 @@
       <div class="btn-group ms-auto d-none d-sm-flex">
         <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addAliasModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_alias }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_alias_table" data-table="alias_table">{{ lang.admin.refresh }}</button>
-        <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>
-        <ul class="dropdown-menu" data-table-id="alias_table" role="menu">
-          {% include 'mailbox/page-size.twig' %}
-        </ul>
       </div>
     </div>
     <div class="card-body text-muted">
       {{ lang.mailbox.alias_domain_alias_hint|raw }}
     </div>
     <!-- <div class="mass-actions-mailbox" data-actions-header="true"></div> -->
-    <div class="table-responsive">
-      <table id="alias_table" class="table table-striped"></table>
-    </div>
+    <table id="alias_table" class="table table-striped dt-responsive nowrap w-100"></table>
     <div class="mass-actions-mailbox">
       <div class="btn-group">
         <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" id="toggle_multi_select_all" data-id="alias" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>

data/web/templates/mailbox/tab-resources.twig

@@ -5,10 +5,6 @@
       <div class="btn-group ms-auto d-none d-sm-flex">
         <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addResourceModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_resource }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_resource_table" data-table="resource_table">{{ lang.admin.refresh }}</button>
-        <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>
-        <ul class="dropdown-menu" data-table-id="resource_table" role="menu">
-          {% include 'mailbox/page-size.twig' %}
-        </ul>
       </div>
     </div>
     <div class="card-body text-muted">

data/web/templates/mailbox/tab-syncjobs.twig

@@ -5,16 +5,10 @@
       <div class="btn-group ms-auto d-none d-sm-flex">
         <button data-acl="{{ acl.syncjobs }}" class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addSyncJobModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.user.create_syncjob }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_sync_job_table" data-table="sync_job_table">{{ lang.admin.refresh }}</button>
-        <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>
-        <ul class="dropdown-menu" data-table-id="sync_job_table" role="menu">
-          {% include 'mailbox/page-size.twig' %}
-        </ul>
       </div>
     </div>
     <!-- <div class="mass-actions-mailbox" data-actions-header="true"></div> -->
-    <div class="table-responsive">
-      <table class="table table-striped" id="sync_job_table"></table>
-    </div>
+    <table id="sync_job_table" class="table table-striped dt-responsive nowrap w-100"></table>
     <div class="mass-actions-mailbox">
       <div class="btn-group" data-acl="{{ acl.syncjobs }}">
         <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" id="toggle_multi_select_all" data-id="syncjob" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>

data/web/templates/mailbox/tab-tls-policy.twig

@@ -5,17 +5,11 @@
       <div class="btn-group ms-auto d-none d-sm-flex">
         <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addTLSPolicyMapAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_tls_policy_map }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_tls_policy_table" data-table="tls_policy_table">{{ lang.admin.refresh }}</button>
-        <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>
-        <ul class="dropdown-menu" data-table-id="tls_policy_table" role="menu">
-          {% include 'mailbox/page-size.twig' %}
-        </ul>
       </div>
     </div>
     <p style="margin:10px" class="text-muted">{{ lang.mailbox.tls_policy_maps_info|raw }}</p>
 {#    <div class="mass-actions-mailbox" data-actions-header="true"></div>#}
-    <div class="table-responsive">
-      <table class="table table-striped" id="tls_policy_table"></table>
-    </div>
+    <table id="tls_policy_table" class="table table-striped dt-responsive nowrap w-100"></table>
     <div class="mass-actions-mailbox">
       <div class="btn-group">
         <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" id="toggle_multi_select_all" data-id="tls-policy-map" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>