Use the new system of datatables-select 2.0 where checkboxes are true checkbox fields

assets/controllers/elements/datatables/datatables_controller.js

@@ -31,11 +31,15 @@ import 'datatables.net-bs5';
 import 'datatables.net-buttons-bs5';
 import 'datatables.net-buttons/js/buttons.colVis.js';
 import 'datatables.net-fixedheader-bs5';
-import 'datatables.net-select-bs5';
 import 'datatables.net-colreorder-bs5';
 import 'datatables.net-responsive-bs5';
 import '../../../js/lib/datatables';
 
+//import 'datatables.net-select-bs5';
+//Use the local version containing the fix for the select extension
+import '../../../js/lib/dataTables.select.mjs';
+
+
 const EVENT_DT_LOADED = 'dt:loaded';
 
 export default class extends Controller {
@@ -132,7 +136,7 @@ export default class extends Controller {
         if(this.isSelectable()) {
             options.select = {
                 style:    'multi+shift',
-                selector: 'td.select-checkbox'
+                selector: 'td.dt-select',
             };
         }
 
@@ -186,27 +190,6 @@ export default class extends Controller {
             dt.fixedHeader.headerOffset($("#navbar").outerHeight());
         });
 
-        //Register event handler to selectAllRows checkbox if available
-        if (this.isSelectable()) {
-            promise.then((dt) => {
-               const selectAllCheckbox = this.element.querySelector('thead th.select-checkbox');
-               selectAllCheckbox.addEventListener('click', () => {
-                   if(selectAllCheckbox.parentElement.classList.contains('selected')) {
-                       dt.rows().deselect();
-                       selectAllCheckbox.parentElement.classList.remove('selected');
-                   } else {
-                       dt.rows().select();
-                       selectAllCheckbox.parentElement.classList.add('selected');
-                   }
-               });
-
-                //When any row is deselected, also deselect the selectAll checkbox
-                dt.on('deselect.dt', () => {
-                    selectAllCheckbox.parentElement.classList.remove('selected');
-                });
-            });
-        }
-
         //Allow to further configure the datatable
         promise.then(this._afterLoaded.bind(this));
 

assets/js/lib/datatables.js

@@ -98,6 +98,15 @@
                     dtOpts = config.options(dtOpts);
                 }
 
+                //Choose the column where the className contains "select-column" and apply the select extension to its render field
+                //Added for Part-DB
+                for (let column of dtOpts.columns) {
+                    if (column.className && column.className.includes('dt-select')) {
+                        column.render = $.fn.dataTable.render.select();
+                    }
+                }
+
+
                 root.html(data.template);
                 dt = $('table', root).DataTable(dtOpts);
                 if (config.state !== 'none') {

src/DataTables/Column/SelectColumn.php

@@ -38,7 +38,7 @@ class SelectColumn extends AbstractColumn
             'label' => '',
             'orderable' => false,
             'searchable' => false,
-            'className' => 'select-checkbox no-colvis',
+            'className' => 'dt-select no-colvis',
             'visible' => true,
         ]);