Fix: #4964 - upgrade datatables to V2

fisharebest · Oct 30, 2024 · 2342bac · 2342bac
1 parent 7669805
commit 2342bac
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 26 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,8 +26,8 @@
     "beautifymarker": "1.0.9",
     "bootstrap": "5.3.3",
     "corejs-typeahead": "1.3.4",
-    "datatables.net": "1.13.11",
-    "datatables.net-bs5": "1.13.11",
+    "datatables.net": "2.1.8",
+    "datatables.net-bs5": "2.1.8",
     "dejavu-fonts-ttf": "2.37.3",
     "hideshowpassword": "2.2.0",
     "jquery": "3.7.1",

diff --git a/public/css/vendor.min.css b/public/css/vendor.min.css
diff --git a/public/js/vendor.min.js b/public/js/vendor.min.js
diff --git a/public/js/webtrees.min.js b/public/js/webtrees.min.js
diff --git a/resources/css/_vendor-patches.css b/resources/css/_vendor-patches.css
@@ -46,3 +46,13 @@
 [dir=rtl] .carousel-control-prev-icon  {
     transform: scale(-1, 1);
 }
+
+/* Some themes set the global default to separate.  We should change this. */
+table.datatables {
+    border-collapse: collapse;
+}
+
+/* Don't right-align column headings of numeric data. */
+table.datatables > thead > tr > th.dt-type-numeric {
+    text-align: inherit;
+}
diff --git a/resources/js/vendor.js b/resources/js/vendor.js
@@ -32,8 +32,6 @@ window.bootstrap = {
   Tooltip: Tooltip,
 };
 
-import 'datatables.net';
-
 // Just import the subset of icons that we use in resources/views/icons/
 import { dom, library } from '@fortawesome/fontawesome-svg-core';
 import {
@@ -56,7 +54,9 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import 'corejs-typeahead';
 
+import DataTable from 'datatables.net';
 import 'datatables.net-bs5';
+window.DataTable = DataTable;
 
 import Sortable from 'sortablejs';
 

diff --git a/resources/js/webtrees.js b/resources/js/webtrees.js
@@ -941,9 +941,9 @@ $(function () {
   };
 
   // DataTables - start hidden to prevent FOUC.
-  $('table.datatables').each(function () {
-    $(this).DataTable();
-    $(this).removeClass('d-none');
+  document.querySelectorAll('table.datatables').forEach(function (element) {
+    new DataTable(element);
+    element.classList.remove('d-none');
   });
 
   // Save button/checkbox state between pages

diff --git a/resources/views/lists/datatables-attributes.phtml b/resources/views/lists/datatables-attributes.phtml
@@ -7,7 +7,7 @@ use Fisharebest\Webtrees\I18N;
 ?>
 
 data-auto-width="false"
-data-dom="<&quot;d-flex justify-content-between&quot;pf><t><&quot;d-flex justify-content-between&quot;irl>"
+data-layout="<?= e(json_encode(['topStart' => 'paging', 'topEnd' => 'search', 'bottomStart' => 'info', 'bottomEnd' => 'pageLength'], JSON_THROW_ON_ERROR)) ?>"
 data-state-save="true"
 data-length-menu="<?= e(json_encode([[10, 20, 50, 100, 500, 1000, -1], [I18N::number(10), I18N::number(20), I18N::number(50), I18N::number(100), I18N::number(500), I18N::number(1000), I18N::translate('All')]], JSON_THROW_ON_ERROR)) ?>"
 data-language="<?= e(json_encode([