From 8bd7a8430ead3408287b1ada56680ff5929088d9 Mon Sep 17 00:00:00 2001
From: Allan Jardine <allan@datatables.net>
Date: Wed, 24 May 2023 12:39:10 +0100
Subject: [PATCH] Update: Example's code to DataTables modern style

---
 examples/initialisation/alwaysAsk.xml         | 21 ++++--
 examples/initialisation/columns.xml           | 50 ++++++++++----
 examples/initialisation/disableHorizontal.xml | 22 ++++--
 examples/initialisation/enableDisable.xml     | 68 +++++++++++++------
 examples/initialisation/events.xml            | 28 +++++---
 examples/initialisation/fills.xml             | 16 +++--
 examples/initialisation/focus.xml             | 22 ++++--
 examples/initialisation/keyTable.xml          | 19 ++++--
 examples/initialisation/plugins.xml           | 61 ++++++++++++-----
 examples/initialisation/scrolling.xml         | 28 +++++---
 examples/styling/bootstrap.xml                | 16 +++--
 examples/styling/bootstrap4.xml               | 16 +++--
 examples/styling/bootstrap5.xml               | 16 +++--
 examples/styling/bulma.xml                    | 16 +++--
 examples/styling/foundation.xml               | 16 +++--
 examples/styling/jqueryui.xml                 | 16 +++--
 examples/styling/semanticui.xml               | 18 +++--
 17 files changed, 304 insertions(+), 145 deletions(-)

diff --git a/examples/initialisation/alwaysAsk.xml b/examples/initialisation/alwaysAsk.xml
index c29efcc..10038f7 100644
--- a/examples/initialisation/alwaysAsk.xml
+++ b/examples/initialisation/alwaysAsk.xml
@@ -4,15 +4,22 @@
 <css lib="datatables autofill" />
 <js lib="jquery datatables autofill">
 <![CDATA[
-$(document).ready(function() {
-	$('#example').DataTable( {
-		autoFill: {
-			alwaysAsk: true
-		}
-	} );
-} );
+$('#example').DataTable({
+	autoFill: {
+		alwaysAsk: true,
+	},
+});
 ]]>
 </js>
+<js-vanilla>
+<![CDATA[
+new DataTable('#example', {
+	autoFill: {
+		alwaysAsk: true,
+	},
+});
+]]>
+</js-vanilla>
 
 <title lib="AutoFill">Always confirm action</title>
 
diff --git a/examples/initialisation/columns.xml b/examples/initialisation/columns.xml
index 5818b8f..fe85160 100755
--- a/examples/initialisation/columns.xml
+++ b/examples/initialisation/columns.xml
@@ -4,26 +4,48 @@
 <css lib="datatables autofill select" />
 <js lib="jquery datatables autofill select">
 <![CDATA[
-$(document).ready(function() {
-	$('#example').DataTable( {
-		columnDefs: [ {
+$('#example').DataTable({
+	autoFill: {
+		columns: ':not(:first-child)',
+	},
+	columnDefs: [
+		{
 			orderable: false,
 			className: 'select-checkbox',
-			targets:   0
-		} ],
-		select: {
-			style:    'os',
-			selector: 'td:first-child'
+			targets: 0,
 		},
-		order: [[ 1, 'asc' ]],
-		autoFill: {
-			columns: ':not(:first-child)'
-		}
-	} );
-} );
+	],
+	order: [[1, 'asc']],
+	select: {
+		style: 'os',
+		selector: 'td:first-child',
+	},
+});
 ]]>
 </js>
 
+<js-vanilla>
+<![CDATA[
+new DataTable('#example', {
+	autoFill: {
+		columns: ':not(:first-child)',
+	},
+	columnDefs: [
+		{
+			orderable: false,
+			className: 'select-checkbox',
+			targets: 0,
+		},
+	],
+	order: [[1, 'asc']],
+	select: {
+		style: 'os',
+		selector: 'td:first-child',
+	},
+});
+]]>
+</js-vanilla>
+
 <title lib="AutoFill">Column selector</title>
 
 <info><![CDATA[
diff --git a/examples/initialisation/disableHorizontal.xml b/examples/initialisation/disableHorizontal.xml
index d97f818..6bd0e27 100644
--- a/examples/initialisation/disableHorizontal.xml
+++ b/examples/initialisation/disableHorizontal.xml
@@ -4,16 +4,24 @@
 <css lib="datatables autofill" />
 <js lib="jquery datatables autofill">
 <![CDATA[
-$(document).ready(function() {
-	$('#example').DataTable( {
-		autoFill: {
-			horizontal: false
-		}
-	} );
-} );
+$('#example').DataTable({
+	autoFill: {
+		horizontal: false,
+	},
+});
 ]]>
 </js>
 
+<js-vanilla>
+<![CDATA[
+new DataTable('#example', {
+	autoFill: {
+		horizontal: false,
+	},
+});
+]]>
+</js-vanilla>
+
 <title lib="AutoFill">Disable horizontal fill</title>
 
 <info><![CDATA[
diff --git a/examples/initialisation/enableDisable.xml b/examples/initialisation/enableDisable.xml
index c393c21..987f28d 100644
--- a/examples/initialisation/enableDisable.xml
+++ b/examples/initialisation/enableDisable.xml
@@ -4,32 +4,56 @@
 <css lib="datatables autofill buttons" />
 <js lib="jquery datatables autofill buttons">
 <![CDATA[
-$(document).ready(function() {
-	$('#example').DataTable( {
-		autoFill: {
-			enable: false
-		},
-		dom: 'Bfrtip',
-		buttons: [
-			{
-				text: "Enable AutoFill",
-				action: function (e, dt) {
-					if ( dt.autoFill().enabled() ) {
-						this.autoFill().disable();
-						this.text( 'Enable AutoFill' );
-					}
-					else {
-						this.autoFill().enable();
-						this.text( 'Disable AutoFill' );
-					}
+$('#example').DataTable({
+	autoFill: {
+		enable: false,
+	},
+	dom: 'Bfrtip',
+	buttons: [
+		{
+			text: 'Enable AutoFill',
+			action: function (e, dt) {
+				if (dt.autoFill().enabled()) {
+					this.autoFill().disable();
+					this.text('Enable AutoFill');
+				}
+				else {
+					this.autoFill().enable();
+					this.text('Disable AutoFill');
 				}
-			}
-		]
-	} );
-} );
+			},
+		},
+	],
+});
 ]]>
 </js>
 
+<js-vanilla>
+<![CDATA[
+new DataTable('#example', {
+	autoFill: {
+		enable: false,
+	},
+	dom: 'Bfrtip',
+	buttons: [
+		{
+			text: 'Enable AutoFill',
+			action: function (e, dt) {
+				if (dt.autoFill().enabled()) {
+					this.autoFill().disable();
+					this.text('Enable AutoFill');
+				}
+				else {
+					this.autoFill().enable();
+					this.text('Disable AutoFill');
+				}
+			},
+		},
+	],
+});
+]]>
+</js-vanilla>
+
 <title lib="AutoFill">Enable / disable API</title>
 
 <info><![CDATA[
diff --git a/examples/initialisation/events.xml b/examples/initialisation/events.xml
index 1a5d813..e6219a5 100644
--- a/examples/initialisation/events.xml
+++ b/examples/initialisation/events.xml
@@ -4,18 +4,28 @@
 <css lib="datatables autofill" />
 <js lib="jquery datatables autofill">
 <![CDATA[
-$(document).ready(function() {
-	var table = $('#example').DataTable( {
-		autoFill: true
-	} );
-
-	table.on( 'autoFill', function () {
-		table.columns.adjust();
-	} );
-} );
+var table = $('#example').DataTable({
+	autoFill: true,
+});
+
+table.on('autoFill', function () {
+	table.columns.adjust();
+});
 ]]>
 </js>
 
+<js-vanilla>
+<![CDATA[
+var table = new DataTable('#example', {
+	autoFill: true,
+});
+
+table.on('autoFill', function () {
+	table.columns.adjust();
+});
+]]>
+</js-vanilla>
+
 <title lib="AutoFill">Events</title>
 
 <info><![CDATA[
diff --git a/examples/initialisation/fills.xml b/examples/initialisation/fills.xml
index a529d82..6c73f25 100644
--- a/examples/initialisation/fills.xml
+++ b/examples/initialisation/fills.xml
@@ -4,14 +4,20 @@
 <css lib="datatables autofill" />
 <js lib="jquery datatables autofill">
 <![CDATA[
-$(document).ready(function() {
-	$('#example').DataTable( {
-		autoFill: true
-	} );
-} );
+$('#example').DataTable({
+	autoFill: true,
+});
 ]]>
 </js>
 
+<js-vanilla>
+<![CDATA[
+new DataTable('#example', {
+	autoFill: true,
+});
+]]>
+</js-vanilla>
+
 <title lib="AutoFill">Fill types</title>
 
 <info><![CDATA[
diff --git a/examples/initialisation/focus.xml b/examples/initialisation/focus.xml
index 01ddfed..7a5d41f 100644
--- a/examples/initialisation/focus.xml
+++ b/examples/initialisation/focus.xml
@@ -4,16 +4,24 @@
 <css lib="datatables autofill" />
 <js lib="jquery datatables autofill">
 <![CDATA[
-$(document).ready(function() {
-	$('#example').DataTable( {
-		autoFill: {
-			focus: 'click'
-		}
-	} );
-} );
+$('#example').DataTable({
+	autoFill: {
+		focus: true,
+	},
+});
 ]]>
 </js>
 
+<js-vanilla>
+<![CDATA[
+new DataTable('#example', {
+	autoFill: {
+		focus: true,
+	},
+});
+]]>
+</js-vanilla>
+
 <title lib="AutoFill">Click focus</title>
 
 <info><![CDATA[
diff --git a/examples/initialisation/keyTable.xml b/examples/initialisation/keyTable.xml
index a412da4..00a3383 100644
--- a/examples/initialisation/keyTable.xml
+++ b/examples/initialisation/keyTable.xml
@@ -4,15 +4,22 @@
 <css lib="datatables autofill keytable" />
 <js lib="jquery datatables autofill keytable">
 <![CDATA[
-$(document).ready(function() {
-	$('#example').DataTable( {
-		keys: true,
-		autoFill: true
-	} );
-} );
+$('#example').DataTable({
+	keys: true,
+	autoFill: true,
+});
 ]]>
 </js>
 
+<js-vanilla>
+<![CDATA[
+new DataTable('#example', {
+	keys: true,
+	autoFill: true,
+});
+]]>
+</js-vanilla>
+
 <title lib="AutoFill">KeyTable integration</title>
 
 <info><![CDATA[
diff --git a/examples/initialisation/plugins.xml b/examples/initialisation/plugins.xml
index eb9a3c9..fc3a6b3 100644
--- a/examples/initialisation/plugins.xml
+++ b/examples/initialisation/plugins.xml
@@ -4,46 +4,75 @@
 <css lib="datatables autofill" />
 <js lib="jquery datatables autofill">
 <![CDATA[
-
-$.fn.dataTable.AutoFill.actions.names = {
-	available: function ( dt, cells ) {
+DataTable.AutoFill.actions.names = {
+	available: function (dt, cells) {
 		// Only available if a single column is being
 		// filled and it is the first column
 		return cells[0].length === 1 && cells[0][0].index.column === 0;
 	},
 
-	option: function ( dt, cells ) {
+	option: function (dt, cells) {
 		// Ask the user if they want to change the surname only
 		return 'Fill only surname - retain first name';
 	},
 
-	execute: function ( dt, cells, node ) {
+	execute: function (dt, cells, node) {
 		// Modify the name and set the new values
 		var surname = cells[0][0].data.split(' ')[1];
 
-		for ( var i=0, ien=cells.length ; i<ien ; i++ ) {
+		for (var i = 0, ien = cells.length; i < ien; i++) {
 			var name = cells[i][0].data.split(' ');
 
-			cells[i][0].set = name[0]+' '+surname;
+			cells[i][0].set = name[0] + ' ' + surname;
 		}
-	}
-}
-
-$(document).ready(function() {
-	$('#example').DataTable( {
-		autoFill: true
-	} );
-} );
+	},
+};
+
+$('#example').DataTable({
+	autoFill: true,
+});
 ]]>
 </js>
 
+<js-vanilla>
+<![CDATA[
+DataTable.AutoFill.actions.names = {
+	available: function (dt, cells) {
+		// Only available if a single column is being
+		// filled and it is the first column
+		return cells[0].length === 1 && cells[0][0].index.column === 0;
+	},
+
+	option: function (dt, cells) {
+		// Ask the user if they want to change the surname only
+		return 'Fill only surname - retain first name';
+	},
+
+	execute: function (dt, cells, node) {
+		// Modify the name and set the new values
+		var surname = cells[0][0].data.split(' ')[1];
+
+		for (var i = 0, ien = cells.length; i < ien; i++) {
+			var name = cells[i][0].data.split(' ');
+
+			cells[i][0].set = name[0] + ' ' + surname;
+		}
+	},
+};
+
+new DataTable('#example', {
+	autoFill: true,
+});
+]]>
+</js-vanilla>
+
 <title lib="AutoFill">Fill plug-ins</title>
 
 <info><![CDATA[
 
 AutoFill provides a [number of built in fill types](fills.html), but these built in options can be augmented with additional options using plug-ins.
 
-The fill options are provided by plug-ins which are attached to the `$.fn.dataTable.AutoFill.actions` object. Each property in this object must be an object that provides three functions:
+The fill options are provided by plug-ins which are attached to the `DataTable.AutoFill.actions` object. Each property in this object must be an object that provides three functions:
 
 * `available` - Determine if the data that the user dragged the fill over is suitable for this fill type
 * `option` - Returns a question the user will be asked if they want to use this fill type
diff --git a/examples/initialisation/scrolling.xml b/examples/initialisation/scrolling.xml
index a9a3292..e125da8 100755
--- a/examples/initialisation/scrolling.xml
+++ b/examples/initialisation/scrolling.xml
@@ -4,18 +4,28 @@
 <css lib="datatables autofill" />
 <js lib="jquery datatables autofill">
 <![CDATA[
-$(document).ready(function() {
-	var table = $('#example').dataTable( {
-		scrollY: 400,
-		scrollX: true,
-		scrollCollapse: true,
-		paging: false,
-		autoFill: true
-	} );
-} );
+$('#example').dataTable({
+	scrollY: 400,
+	scrollX: true,
+	scrollCollapse: true,
+	paging: false,
+	autoFill: true,
+});
 ]]>
 </js>
 
+<js-vanilla>
+<![CDATA[
+new DataTable('#example', {
+	scrollY: 400,
+	scrollX: true,
+	scrollCollapse: true,
+	paging: false,
+	autoFill: true,
+});
+]]>
+</js-vanilla>
+
 <title lib="AutoFill">Scrolling DataTable</title>
 
 <info><![CDATA[
diff --git a/examples/styling/bootstrap.xml b/examples/styling/bootstrap.xml
index a676fd2..55fe0f8 100644
--- a/examples/styling/bootstrap.xml
+++ b/examples/styling/bootstrap.xml
@@ -4,16 +4,20 @@
 <css lib="datatables autofill"/>
 <js lib="jquery datatables autofill">
 <![CDATA[
-
-$(document).ready(function() {
-	$('#example').DataTable( {
-		autoFill: true
-	} );
+$('#example').DataTable( {
+	autoFill: true
 } );
-
 ]]>
 </js>
 
+<js-vanilla>
+<![CDATA[
+new DataTable('#example', {
+	autoFill: true
+} );
+]]>
+</js-vanilla>
+
 <title lib="AutoFill">Bootstrap 3 styling</title>
 
 <info><![CDATA[
diff --git a/examples/styling/bootstrap4.xml b/examples/styling/bootstrap4.xml
index d312ae8..6fd0655 100644
--- a/examples/styling/bootstrap4.xml
+++ b/examples/styling/bootstrap4.xml
@@ -4,16 +4,20 @@
 <css lib="datatables autofill"/>
 <js lib="jquery datatables autofill">
 <![CDATA[
-
-$(document).ready(function() {
-	$('#example').DataTable( {
-		autoFill: true
-	} );
+$('#example').DataTable( {
+	autoFill: true
 } );
-
 ]]>
 </js>
 
+<js-vanilla>
+<![CDATA[
+new DataTable('#example', {
+	autoFill: true
+} );
+]]>
+</js-vanilla>
+
 <title lib="AutoFill">Bootstrap 4 styling</title>
 
 <info><![CDATA[
diff --git a/examples/styling/bootstrap5.xml b/examples/styling/bootstrap5.xml
index 8b84dd4..5388c7c 100644
--- a/examples/styling/bootstrap5.xml
+++ b/examples/styling/bootstrap5.xml
@@ -4,16 +4,20 @@
 <css lib="datatables autofill"/>
 <js lib="jquery datatables autofill">
 <![CDATA[
-
-$(document).ready(function() {
-	$('#example').DataTable( {
-		autoFill: true
-	} );
+$('#example').DataTable( {
+	autoFill: true
 } );
-
 ]]>
 </js>
 
+<js-vanilla>
+<![CDATA[
+new DataTable('#example', {
+	autoFill: true
+} );
+]]>
+</js-vanilla>
+
 <title lib="AutoFill">Bootstrap 5 styling</title>
 
 <info><![CDATA[
diff --git a/examples/styling/bulma.xml b/examples/styling/bulma.xml
index 65f48c1..7411681 100644
--- a/examples/styling/bulma.xml
+++ b/examples/styling/bulma.xml
@@ -4,16 +4,20 @@
 <css lib="datatables autofill"/>
 <js lib="jquery datatables autofill">
 <![CDATA[
-
-$(document).ready(function() {
-	$('#example').DataTable( {
-		autoFill: true
-	} );
+$('#example').DataTable( {
+	autoFill: true
 } );
-
 ]]>
 </js>
 
+<js-vanilla>
+<![CDATA[
+new DataTable('#example', {
+	autoFill: true
+} );
+]]>
+</js-vanilla>
+
 <title lib="AutoFill">Bulma styling</title>
 
 <info><![CDATA[
diff --git a/examples/styling/foundation.xml b/examples/styling/foundation.xml
index 587e60d..f2f22e5 100644
--- a/examples/styling/foundation.xml
+++ b/examples/styling/foundation.xml
@@ -4,16 +4,20 @@
 <css lib="datatables autofill"/>
 <js lib="jquery datatables autofill">
 <![CDATA[
-
-$(document).ready(function() {
-	$('#example').DataTable( {
-		autoFill: true
-	} );
+$('#example').DataTable( {
+	autoFill: true
 } );
-
 ]]>
 </js>
 
+<js-vanilla>
+<![CDATA[
+new DataTable('#example', {
+	autoFill: true
+} );
+]]>
+</js-vanilla>
+
 <title lib="AutoFill">Foundation styling</title>
 
 <info><![CDATA[
diff --git a/examples/styling/jqueryui.xml b/examples/styling/jqueryui.xml
index 2ff9062..f9cb9cd 100644
--- a/examples/styling/jqueryui.xml
+++ b/examples/styling/jqueryui.xml
@@ -4,16 +4,20 @@
 <css lib="datatables autofill"/>
 <js lib="jquery datatables autofill">
 <![CDATA[
-
-$(document).ready(function() {
-	$('#example').DataTable( {
-		autoFill: true
-	} );
+$('#example').DataTable( {
+	autoFill: true
 } );
-
 ]]>
 </js>
 
+<js-vanilla>
+<![CDATA[
+new DataTable('#example', {
+	autoFill: true
+} );
+]]>
+</js-vanilla>
+
 <title lib="AutoFill">jQuery UI styling</title>
 
 <info><![CDATA[
diff --git a/examples/styling/semanticui.xml b/examples/styling/semanticui.xml
index 7219348..7c45dd2 100644
--- a/examples/styling/semanticui.xml
+++ b/examples/styling/semanticui.xml
@@ -2,18 +2,22 @@
 <dt-example table-type="html" order="5" framework="semanticui">
 
 <css lib="datatables autofill"/>
-<js lib="jquery semanticui datatables autofill">
+<js lib="jquery datatables autofill">
 <![CDATA[
-
-$(document).ready(function() {
-	$('#example').DataTable( {
-		autoFill: true
-	} );
+$('#example').DataTable( {
+	autoFill: true
 } );
-
 ]]>
 </js>
 
+<js-vanilla>
+<![CDATA[
+new DataTable('#example', {
+	autoFill: true
+} );
+]]>
+</js-vanilla>
+
 <title lib="AutoFill">Fomantic-UI (formally Semantic-UI) styling</title>
 
 <info><![CDATA[