Use layout instead of dom for datatables

SemanticMediaWiki · Dec 7, 2024 · 33c3400 · 33c3400
1 parent b805f09
commit 33c3400
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 41 deletions.
diff --git a/formats/datatables/DataTables.php b/formats/datatables/DataTables.php
@@ -241,12 +241,6 @@ public function getParamDefinitions( array $definitions ) {
 			'default' => '',
 		];
 
-		$params['datatables-dom'] = [
-			'type' => 'string',
-			'message' => 'srf-paramdesc-datatables-library-option',
-			'default' => 'lfrtip',
-		];
-
 		$params['datatables-fixedHeader'] = [
 			'type' => 'boolean',
 			'message' => 'srf-paramdesc-datatables-library-option',

diff --git a/formats/datatables/resources/ext.srf.formats.datatables.css b/formats/datatables/resources/ext.srf.formats.datatables.css
@@ -1,18 +1,5 @@
-
-.dt-filter {
-	float: left;
-}
-
-.dt-length {
-	float: right;	
-}
-
-.srf-datatable .srf-datatable-left {
-	float: left;
-}
-
-.srf-datatable .srf-datatable-right {
-	float: right;
+.dtsp-panesContainer {
+	width: 100%;
 }
 
 .srf-datatable .dt-buttons {

diff --git a/formats/datatables/resources/ext.srf.formats.datatables.js b/formats/datatables/resources/ext.srf.formats.datatables.js
@@ -485,11 +485,6 @@
 			var order = table.data("order");
 			var options = data["formattedOptions"];
 
-			// add the button placeholder if any button is required
-			if (options.buttons.length && options.dom.indexOf("B") === -1) {
-				options.dom = "B" + options.dom;
-			}
-
 			function isObject(obj) {
 				return obj !== null && typeof obj === "object" && !Array.isArray(obj);
 			}
@@ -511,22 +506,9 @@
 			// var mark = isObject(options.mark);
 
 			var searchPanes = isObject(options.searchPanes);
-
-			if (searchPanes) {
-				if (options.dom.indexOf("P") === -1) {
-					options.dom = "P" + options.dom;
-				}
-			} else {
-				options.dom = options.dom.replace("P", "");
-			}
-
 			var searchBuilder = options.searchBuilder;
 
 			if (searchBuilder) {
-				if (options.dom.indexOf("Q") === -1) {
-					options.dom = "Q" + options.dom;
-				}
-
 				// @see https://datatables.net/extensions/searchbuilder/customConditions.html
 				// @see https://github.com/DataTables/SearchBuilder/blob/master/src/searchBuilder.ts
 				options.searchBuilder = {
@@ -546,10 +528,18 @@
 						},
 					},
 				};
-			} else {
-				options.dom = options.dom.replace("Q", "");
 			}
 
+			options.layout = {
+				top9End: options.buttons.length ? 'buttons': null,
+				top3: searchBuilder ? 'searchBuilder': null,
+				top2: searchPanes ? 'searchPanes' : null,
+				topStart: 'pageLength',
+				topEnd: 'search',
+				bottomStart: 'info',
+				bottomEnd: 'paging'
+			};
+
 			// add the pagelength at the proper place in the length menu
 			if ($.inArray(options.pageLength, options.lengthMenu) < 0) {
 				options.lengthMenu.push(options.pageLength);