From 8273ea893228052c2f3a7ff9b6e9b99bfa8cab60 Mon Sep 17 00:00:00 2001
From: Daniel Prause <daniel.prause@re.gmbh>
Date: Fri, 21 Jul 2023 11:39:00 +0200
Subject: [PATCH] feat: allow data attributes for sDOM

---
 docs/option/dom.xml         |  6 ++++--
 examples/basic_init/dom.xml |  3 +++
 js/core/core.draw.js        | 24 +++++++++++++++++++++---
 test/options/Options/dom.js | 11 +++++++++++
 4 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/docs/option/dom.xml b/docs/option/dom.xml
index 6fa9e48ea..893eeb31d 100644
--- a/docs/option/dom.xml
+++ b/docs/option/dom.xml
@@ -41,6 +41,8 @@
     * `<"class"` and `>` - div with a class
     * `<"#id"` and `>` - div with an ID
     * `<"#id.class"` and `>` - div with an ID _and_ a class
+    * `<"$[my_data_attribute=test]#id.class"` and `>` - div with an ID, a class and a data attribute. Attributes can be separated by a comma.
+    * `<"$[attribute1=test,attribute2=test2]"` and `>`- div with multiple data attributes.
 
     ### Styling
 
@@ -72,7 +74,7 @@
 		"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
     ```
 
-    Foundation: 
+    Foundation:
 
     ```js
     "<'row'<'small-6 columns'l><'small-6 columns'f>r>"+
@@ -123,7 +125,7 @@
     ### Future development
 
     Note, I am aware that this is the most complex option in DataTables and it takes a fair amount of understanding, particularly when using the styling integration options! The plan is to revamp this option in 1.11 to make it easier to use.
-    
+
     ]]>
   </description>
 
diff --git a/examples/basic_init/dom.xml b/examples/basic_init/dom.xml
index 5caf7001e..0ded9d64b 100644
--- a/examples/basic_init/dom.xml
+++ b/examples/basic_init/dom.xml
@@ -37,6 +37,9 @@ The built-in options available are:
 * `<"#id"` and `>` - div with an id
 * `<"class"` and `>` - div with a class
 * `<"#id.class"` and `>` - div with an id and class
+* `<"$[my_data_attribute=test]#id.class"` and `>` - div with an ID, a class and a data attribute. Attributes can be separated by a comma.
+* `<"$[attribute1=test,attribute2=test2]"` and `>`- div with multiple data attributes.
+
 
 Example 1:
 
diff --git a/js/core/core.draw.js b/js/core/core.draw.js
index a40d6b0ec..af8e407f6 100644
--- a/js/core/core.draw.js
+++ b/js/core/core.draw.js
@@ -48,7 +48,7 @@ function _fnCreateTr ( oSettings, iRow, nTrIn, anTds )
 				row: iRow,
 				column: i
 			};
-			
+
 			cells.push( nTd );
 
 			// Need to create the HTML if new, or if a rendering function is defined
@@ -197,7 +197,7 @@ function _fnBuildHead( oSettings )
 
 			if (column) {
 				column.nTf = cells[i].cell;
-	
+
 				if ( column.sClass ) {
 					$(column.nTf).addClass( column.sClass );
 				}
@@ -542,8 +542,26 @@ function _fnAddOptionsHtml ( oSettings )
 				}
 
 				/* The attribute can be in the format of "#id.class", "#id" or "class" This logic
-				 * breaks the string into parts and applies them as needed
+				 * breaks the string into parts and applies them as needed.
+				 * Furthermore, we can now set data attributes, if necessary.
 				 */
+
+				// first, filter all data attributes, if existent:
+				let data_attributes = /\$\[(.*)\]/g.exec(sAttr)
+				if(data_attributes != null && data_attributes[1] !== undefined) {
+					let list = data_attributes[1].split(',')
+					for(var i=0;i<list.length;i++) {
+						let pair = list[i]
+						let splitted = pair.split('=')
+						let name = splitted[0]
+						let value = splitted[1]
+
+						nNewNode.dataset[`${name}`] = value
+					}
+				}
+				// remove possible data attributes, so that the rest of the logic works.
+				sAttr = sAttr.replace(/\$\[.*\]/, '')
+
 				if ( sAttr.indexOf('.') != -1 )
 				{
 					var aSplit = sAttr.split('.');
diff --git a/test/options/Options/dom.js b/test/options/Options/dom.js
index 121610ad8..574ee8f92 100644
--- a/test/options/Options/dom.js
+++ b/test/options/Options/dom.js
@@ -211,5 +211,16 @@ describe('DOM option', function() {
 			expect($('#test2').length).toBe(1);
 			expect($('div.classTest').length).toBe(1);
 		});
+
+		dt.html('basic');
+		it('Two elements with an id, one of them with data attributes and one with a class.', function() {
+			$('table').dataTable({
+				dom: '<"$[controller=test]#test1"lf>rti<"#test2.classTest"lf>'
+			});
+			expect($('#test1').length).toBe(1);
+			expect($('#test1').data('controller')).toBe('test');
+			expect($('#test2').length).toBe(1);
+			expect($('div.classTest').length).toBe(1);
+		});
 	});
 });