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

formats/datatables/DataTables.php

@@ -573,7 +573,7 @@ protected function getResultText( QueryResult $res, $outputmode ) {
 
 			foreach ( $rows as $cell ) {
 				$this->htmlTable->cell(
-					( $cell === '' ? ' ' : $cell ),
+					( $cell['display'] === '' ? ' ' : $cell['display'] ),
 					[]
 				);
 			}
@@ -993,7 +993,13 @@ public function getCellContent( $label, $dataValues, $outputMode, $isSubject, $p
 			$html = implode( $this->params['sep'], $values );
 		}
 
-		return $html;
+		$sortKey = $dataValues[0]->getDataItem()->getSortKey();
+
+		return [
+			'display' => $html,
+			'filter' => $sortKey,
+			'order' => $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;
 						},
 					});
 				}
@@ -544,7 +545,7 @@
 						num: {
 							null: null,
 						},
-					},
+					}
 				};
 			} else {
 				options.dom = options.dom.replace("Q", "");
@@ -579,11 +580,9 @@
 				// @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' : null;
 				}
 
 				columnDefs.push(
@@ -597,9 +596,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: 'order'
+							},
 						},
 						options.columns,
 						data.printoutsParametersOptions[index]