feat: allow data attributes for sDOM

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>
 

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:
 

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('.');

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);
+		});
 	});
 });