Use orthogonal data for DataTables (#865)

* Use orthogonal data for DataTables

Instead of assigning HTML directly as data, we can use assign an object with the following keys:

- display - The display value of the data (same as what we had)

- filter - Value used for filtering (e.g. SearchBuilder)

- order - Value used for sorting

This will make DataTables easier to expand in the long run. Since we can assign different

attributes to the data.

Also fixes #831

* Drop any-number from DataTables

We don't need it anymore because values are assigned a sorting key

* Remove datatables-columns.type as we do not need it anymore

* Use sort instead of order for key name

* Ensure that dataValues[0] exists in SortKey

Resources.php

@@ -1011,8 +1011,7 @@
 			'resources/jquery/datatables/object_hash.js',
 			'resources/jquery/datatables/jquery.mark.min.js',
 			'resources/jquery/datatables/datatables.mark.min.js',
-			'resources/jquery/datatables/datatables.min.js',
-			'resources/jquery/datatables/jquery.dataTables.extras.js',
+			'resources/jquery/datatables/datatables.min.js'
 		],
 		'styles'  => [
 			'resources/jquery/datatables/datatables.mark.min.css',

formats/datatables/Api.php

@@ -111,7 +111,7 @@ public function execute() {
 				if ( $hasMainlabel && trim( $parameters['mainlabel'] ) === '-' ) {
 					continue;
 				}
-				// match something like |?=abc |+ datatables-columns.type=any-number |+template=mytemplate
+				// match something like |?=abc |+template=mytemplate
 			}
 
 			// create printrequest from request mode, label, property name, output format, parameters

formats/datatables/DataTables.php

@@ -261,16 +261,6 @@ public function getParamDefinitions( array $definitions ) {
 
 		//////////////// datatables columns
 
-		// only the options whose value has a sense to
-		// use for all columns, otherwise use (for single printouts)
-		// |?printout name |+ datatables-columns.type = string
-
-		$params['datatables-columns.type'] = [
-			'type' => 'string',
-			'message' => 'srf-paramdesc-datatables-library-option',
-			'default' => '',
-		];
-
 		$params['datatables-columns.width'] = [
 			'type' => 'string',
 			'message' => 'srf-paramdesc-datatables-library-option',
@@ -567,7 +557,7 @@ protected function getResultText( QueryResult $res, $outputmode ) {
 
 			foreach ( $rows as $cell ) {
 				$this->htmlTable->cell(
-					( $cell === '' ? ' ' : $cell ),
+					( $cell['display'] === '' ? ' ' : $cell['display'] ),
 					[]
 				);
 			}
@@ -987,7 +977,14 @@ public function getCellContent( $label, $dataValues, $outputMode, $isSubject, $p
 			$html = implode( $this->params['sep'], $values );
 		}
 
-		return $html;
+		// $dataValues could be empty
+		$sortKey = array_key_exists( 0, $dataValues ) ? $dataValues[0]->getDataItem()->getSortKey() : '';
+
+		return [
+			'display' => $html,
+			'filter' => $sortKey,
+			'sort' => $sortKey
+		];
 	}
 
 	/**

formats/datatables/SearchPanes.php

@@ -384,7 +384,7 @@ private function getPanesOptions( $printRequest, $canonicalLabel, $searchPanesOp
 				$outputMode,
 				$isSubject,
 				$propTypeid
-			);
+			)['display'];
 
 			if ( !array_key_exists( $cellContent, $groups ) ) {
 				$groups[$cellContent] = [ 'count' => 0, 'value' => '' ];
@@ -710,7 +710,7 @@ private function searchPanesMainlabel( $printRequest, $searchPanesOptions, $sear
 				[ $dataValue ],
 				$outputMode,
 				$isSubject
-			);
+			)['display'];
 
 			if ( !array_key_exists( $cellContent, $groups ) ) {
 				$groups[$cellContent] = [ 'count' => 0, 'value' => '' ];

formats/datatables/resources/ext.srf.formats.datatables.js

@@ -164,16 +164,17 @@
 
 			for (var i in data) {
 				for (var ii in ret) {
-					if (data[i][ii] === "") {
+					var cellData = data[i][ii];
+					if (!cellData) {
 						continue;
 					}
 					dataLength[ii]++;
 					var label;
 					if (options.searchPanes.htmlLabels === false) {
-						div.innerHTML = data[i][ii];
+						div.innerHTML = cellData.display;
 						label = div.textContent || div.innerText || "";
 					} else {
-						label = data[i][ii];
+						label = cellData.display;
 					}
 
 					// this will exclude images as well if
@@ -182,15 +183,15 @@
 						continue;
 					}
 
-					if (!(data[i][ii] in ret[ii])) {
-						ret[ii][data[i][ii]] = {
+					if (!(cellData.display in ret[ii])) {
+						ret[ii][cellData.display] = {
 							label: label,
-							value: data[i][ii],
+							value: cellData.display,
 							count: 0,
 						};
 					}
 
-					ret[ii][data[i][ii]].count++;
+					ret[ii][cellData.display].count++;
 				}
 			}
 
@@ -246,7 +247,7 @@
 					columnDefs[i].searchPanes.options.push({
 						label: searchPanesOptions[i][ii].label,
 						value: function (rowData, rowIdx) {
-							return rowData[i] === searchPanesOptions[i][ii].value;
+							return rowData[i].display === searchPanesOptions[i][ii].value;
 						},
 					});
 				}
@@ -605,15 +606,9 @@
 
 			var columnDefs = [];
 			$.map(printrequests, function (property, index) {
-				// @see https://datatables.net/reference/option/columns.type
-				// value for all columns
-				if (!options.columns.type) {
-					options.columns.type =
-						( entityCollation === 'numeric' && property.typeid === '_wpg' )
-						||  [ '_num', '_tem', '_qty' ].indexOf(property.typeid) !== -1 
-							? "any-number"
-							: null;
-				}
+				var isNumeric = ( entityCollation === 'numeric' && property.typeid === '_wpg' )
+					||  [ '_num', '_tem', '_qty' ].indexOf(property.typeid) !== -1;
+				options.columns.type = isNumeric ? 'num' : 'string';
 
 				columnDefs.push(
 					$.extend(
@@ -626,9 +621,13 @@
 							className: "smwtype" + property.typeid,
 							targets: [index],
 
-							// @FIXME https://datatables.net/reference/option/columns.searchBuilderType
-							// implement in the proper way
-							searchBuilderType: "string",
+							// https://datatables.net/reference/option/columns.render
+							render: {
+								_: 'display',
+								display: 'display',
+								filter: 'filter',
+								sort: 'sort'
+							},
 						},
 						options.columns,
 						data.printoutsParametersOptions[index]