Updated: Examples updated to have Vanilla JS code and use Pretter Mor…

…e for formatting
DataTables · Jun 8, 2023 · ad55ece · ad55ece
1 parent 0c34d99
commit ad55ece
Show file tree

Hide file tree

Showing 36 changed files with 853 additions and 379 deletions.
diff --git a/css/responsive.dataTables.scss b/css/responsive.dataTables.scss
@@ -55,6 +55,10 @@ table.dataTable {
 				@include control;
 				@include control-open;
 			}
+
+			&.arrow-right::before {
+				content: "◄";
+			}
 		}
 
 		> tr.parent {
@@ -86,6 +90,10 @@ table.dataTable {
 				@include control;
 				@include control-open;
 			}
+
+			&.arrow-right::before {
+				content: "◄";
+			}
 		}
 
 		> tr.parent {
@@ -133,8 +141,6 @@ table.dataTable {
 			min-width: 75px;
 			font-weight: bold;
 		}
-
-		span.dtr-data {}
 	}
 }
 

diff --git a/examples/child-rows/column-control.xml b/examples/child-rows/column-control.xml
@@ -5,25 +5,47 @@
 <js lib="jquery datatables responsive">
 <![CDATA[
 
-$(document).ready(function() {
-	$('#example').DataTable( {
-		responsive: {
-			details: {
-				type: 'column'
-			}
-		},
-		columnDefs: [ {
+$('#example').DataTable({
+	columnDefs: [
+		{
 			className: 'dtr-control',
 			orderable: false,
-			targets:   0
-		} ],
-		order: [ 1, 'asc' ]
-	} );
-} );
+			targets: 0
+		}
+	],
+	order: [1, 'asc'],
+	responsive: {
+		details: {
+			type: 'column'
+		}
+	}
+});
 
 ]]>
 </js>
 
+<js-vanilla>
+<![CDATA[
+
+new DataTable('#example', {
+	columnDefs: [
+		{
+			className: 'dtr-control',
+			orderable: false,
+			targets: 0
+		}
+	],
+	order: [1, 'asc'],
+	responsive: {
+		details: {
+			type: 'column'
+		}
+	}
+});
+
+]]>
+</js-vanilla>
+
 <title lib="Responsive">Column controlled child rows</title>
 
 <info><![CDATA[

diff --git a/examples/child-rows/custom-renderer.xml b/examples/child-rows/custom-renderer.xml
@@ -5,32 +5,74 @@
 <js lib="jquery datatables responsive">
 <![CDATA[
 
-$(document).ready(function() {
-	$('#example').DataTable( {
-		responsive: {
-			details: {
-				renderer: function ( api, rowIdx, columns ) {
-					var data = $.map( columns, function ( col, i ) {
-						return col.hidden ?
-							'<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
-								'<td>'+col.title+':'+'</td> '+
-								'<td>'+col.data+'</td>'+
-							'</tr>' :
-							'';
-					} ).join('');
-
-					return data ?
-						$('<table/>').append( data ) :
-						false;
-				}
+$('#example').DataTable({
+	responsive: {
+		details: {
+			renderer: function (api, rowIdx, columns) {
+				var data = $.map(columns, function (col, i) {
+					return col.hidden
+						? '<tr data-dt-row="' +
+								col.rowIndex +
+								'" data-dt-column="' +
+								col.columnIndex +
+								'">' +
+								'<td>' +
+								col.title +
+								':' +
+								'</td> ' +
+								'<td>' +
+								col.data +
+								'</td>' +
+								'</tr>'
+						: '';
+				}).join('');
+
+				return data ? $('<table/>').append(data) : false;
 			}
 		}
-	} );
-} );
+	}
+});
 
 ]]>
 </js>
 
+<js-vanilla>
+<![CDATA[
+
+new DataTable('#example', {
+	responsive: {
+		details: {
+			renderer: function (api, rowIdx, columns) {
+				let data = columns.map((col, i) => {
+					return col.hidden
+						? '<tr data-dt-row="' +
+								col.rowIndex +
+								'" data-dt-column="' +
+								col.columnIndex +
+								'">' +
+								'<td>' +
+								col.title +
+								':' +
+								'</td> ' +
+								'<td>' +
+								col.data +
+								'</td>' +
+								'</tr>'
+						: '';
+				}).join('');
+
+				let table = document.createElement('table');
+				table.innerHTML = data;
+
+				return data ? table : false;
+			}
+		}
+	}
+});
+
+]]>
+</js-vanilla>
+
 <title lib="Responsive">Custom child row renderer</title>
 
 <info><![CDATA[

diff --git a/examples/child-rows/disable-child-rows.xml b/examples/child-rows/disable-child-rows.xml
@@ -5,17 +5,27 @@
 <js lib="jquery datatables responsive">
 <![CDATA[
 
-$(document).ready(function() {
-	$('#example').DataTable( {
-		responsive: {
-			details: false
-		}
-	} );
-} );
+$('#example').DataTable({
+	responsive: {
+		details: false
+	}
+});
 
 ]]>
 </js>
 
+<js-vanilla>
+<![CDATA[
+
+new DataTable('#example', {
+	responsive: {
+		details: false
+	}
+});
+
+]]>
+</js-vanilla>
+
 <title lib="Responsive">Disable child rows</title>
 
 <info><![CDATA[

diff --git a/examples/child-rows/right-column.xml b/examples/child-rows/right-column.xml
@@ -5,25 +5,47 @@
 <js lib="jquery datatables responsive">
 <![CDATA[
 
-$(document).ready(function() {
-	$('#example').DataTable( {
-		responsive: {
-			details: {
-				type: 'column',
-				target: -1
-			}
-		},
-		columnDefs: [ {
-			className: 'dtr-control',
+$('#example').DataTable({
+	columnDefs: [
+		{
+			className: 'dtr-control arrow-right',
 			orderable: false,
-			targets:   -1
-		} ]
-	} );
-} );
+			target: -1
+		}
+	],
+	responsive: {
+		details: {
+			type: 'column',
+			target: -1
+		}
+	}
+});
 
 ]]>
 </js>
 
+<js-vanilla>
+<![CDATA[
+
+new DataTable('#example', {
+	columnDefs: [
+		{
+			className: 'dtr-control arrow-right',
+			orderable: false,
+			target: -1
+		}
+	],
+	responsive: {
+		details: {
+			type: 'column',
+			target: -1
+		}
+	}
+});
+
+]]>
+</js-vanilla>
+
 <title lib="Responsive">Column control - right</title>
 
 <info><![CDATA[

diff --git a/examples/child-rows/whole-row-control.xml b/examples/child-rows/whole-row-control.xml
@@ -5,33 +5,56 @@
 <js lib="jquery datatables responsive">
 <![CDATA[
 
-$(document).ready(function() {
-	$('#example').DataTable( {
-		responsive: {
-			details: {
-				type: 'column',
-				target: 'tr'
-			}
-		},
-		columnDefs: [ {
-			className: 'control',
+$('#example').DataTable({
+	columnDefs: [
+		{
+			className: 'dtr-control',
 			orderable: false,
-			targets:   0
-		} ],
-		order: [ 1, 'asc' ]
-	} );
-} );
+			target: 0
+		}
+	],
+	order: [1, 'asc'],
+	responsive: {
+		details: {
+			type: 'column',
+			target: 'tr'
+		}
+	}
+});
 
 ]]>
 </js>
 
+<js-vanilla>
+<![CDATA[
+
+new DataTable('#example', {
+	columnDefs: [
+		{
+			className: 'dtr-control',
+			orderable: false,
+			target: 0
+		}
+	],
+	order: [1, 'asc'],
+	responsive: {
+		details: {
+			type: 'column',
+			target: 'tr'
+		}
+	}
+});
+
+]]>
+</js-vanilla>
+
 <title lib="Responsive">Whole row child row control</title>
 
 <info><![CDATA[
 
 When using the `column` details type in Responsive the `r-init responsive.details.target` option provides the ability to control what element is used to show / hide the child rows when the table is collapsed.
 
-This example uses the `tr` selector to have the whole row act as the control.
+This example uses the `tr` selector to have the whole row act as the control and the `dtr-control` class on the first cell in each row to indicate the child row state.
 
 ]]></info>
 

diff --git a/examples/column-control/auto.xml b/examples/column-control/auto.xml
@@ -1,17 +1,27 @@
 <?xml version="1.0" encoding="UTF-8" ?>
-<dt-example table-type="html-wide" table-class="display responsive nowrap" order="1">
+<dt-example table-type="html-wide" table-class="display nowrap" order="1">
 
 <css lib="datatables responsive" />
 <js lib="jquery datatables responsive">
 <![CDATA[
 
-$(document).ready(function() {
-	$('#example').DataTable();
-} );
+$('#example').DataTable({
+	responsive: true
+});
 
 ]]>
 </js>
 
+<js-vanilla>
+<![CDATA[
+
+new DataTable('#example', {
+	responsive: true
+});
+
+]]>
+</js-vanilla>
+
 <title lib="Responsive">Automatic column hiding</title>
 
 <info><![CDATA[