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. - + ]]> 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;irti<"#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); + }); }); });