diff --git a/sources/application/UI/Base/Component/DataTable/DataTable.php b/sources/application/UI/Base/Component/DataTable/DataTable.php
index 0b30322640..6b8493bf5c 100644
--- a/sources/application/UI/Base/Component/DataTable/DataTable.php
+++ b/sources/application/UI/Base/Component/DataTable/DataTable.php
@@ -22,6 +22,7 @@ class DataTableBlock extends UIContentBlock
 	public const BLOCK_CODE = 'ibo-datatable';
 	public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/components/datatable/layout';
 	public const DEFAULT_JS_TEMPLATE_REL_PATH = 'base/components/datatable/layout';
+	public const DEFAULT_JS_LIVE_TEMPLATE_REL_PATH = 'base/components/datatable/layout';
 	public const DEFAULT_JS_FILES_REL_PATH = [
 		'lib/datatables/js/jquery.dataTables.min.js',
 		'lib/datatables/js/dataTables.bootstrap.min.js',
diff --git a/templates/base/components/datatable/layout.js.twig b/templates/base/components/datatable/layout.js.twig
index 225e6becf3..f70b3862e5 100644
--- a/templates/base/components/datatable/layout.js.twig
+++ b/templates/base/components/datatable/layout.js.twig
@@ -1,41 +1,8 @@
-function checkAllDataTable(table, value) {
-    // Set the 'selectionMode' for the future objects to load
-    var selectionMode = 'positive';
-    if (value) {
-        selectionMode = 'negative';
-    }
-	oSelectedItems{{ oUIBlock.GetOption('sListId') }} =[];
-    // Mark all the displayed items as check or unchecked depending on the value
-    $(table).find(':checkbox[name^=selectObj]:not([disabled])').each(function () {
-        var $currentCheckbox = $(this);
-        $currentCheckbox.prop('checked', value);
-        $currentLine = $currentCheckbox.closest("tr");
-        (value) ? $currentLine.addClass("selected") : $currentLine.removeClass("selected");
-    });
-
-    $(table).parent().parent().find(':input[name=selectionMode]').val(selectionMode);
-    // Reset the list of saved selection...
-    $(':input[name^=storedSelection]').remove();
-    $(table).parent().find(':checkbox[name^=selectObj]').trigger("change");
-
-    if (value) {
-        $(table).DataTable().rows().select();
-	    $('#btn_ok_{{ oUIBlock.GetOption('sTableId') }}').prop('disabled', false);
-    } else {
-        $(table).DataTable().rows({page: 'current'}).deselect();
-	    $('#btn_ok_{{ oUIBlock.GetOption('sTableId') }}').prop('disabled', true);
-    }
-
-    return true;
-}
-
 $('#{{ oUIBlock.GetId() }}').closest("[role=dialog]").on("dialogbeforeclose", function () {
     $('#{{ oUIBlock.GetId() }}').DataTable().clear();
 });
 
-{% if oUIBlock.GetOption("select_mode") is defined %}
-var oSelectedItems{{ oUIBlock.GetOption('sListId') }} = [];
-{% endif %}
+
 
 if ($.fn.dataTable.isDataTable('#{{ oUIBlock.GetId() }}')) {
     $('#{{ oUIBlock.GetId() }}').DataTable().destroy(false);
diff --git a/templates/base/components/datatable/layout.live.js.twig b/templates/base/components/datatable/layout.live.js.twig
new file mode 100644
index 0000000000..bd3b99c544
--- /dev/null
+++ b/templates/base/components/datatable/layout.live.js.twig
@@ -0,0 +1,34 @@
+function checkAllDataTable(table, value) {
+	// Set the 'selectionMode' for the future objects to load
+	var selectionMode = 'positive';
+	if (value) {
+		selectionMode = 'negative';
+	}
+	oSelectedItems{{ oUIBlock.GetOption('sListId') }} =[];
+	// Mark all the displayed items as check or unchecked depending on the value
+	$(table).find(':checkbox[name^=selectObj]:not([disabled])').each(function () {
+		var $currentCheckbox = $(this);
+		$currentCheckbox.prop('checked', value);
+		$currentLine = $currentCheckbox.closest("tr");
+		(value) ? $currentLine.addClass("selected") : $currentLine.removeClass("selected");
+	});
+
+	$(table).parent().parent().find(':input[name=selectionMode]').val(selectionMode);
+	// Reset the list of saved selection...
+	$(':input[name^=storedSelection]').remove();
+	$(table).parent().find(':checkbox[name^=selectObj]').trigger("change");
+
+	if (value) {
+		$(table).DataTable().rows().select();
+		$('#btn_ok_{{ oUIBlock.GetOption('sTableId') }}').prop('disabled', false);
+	} else {
+		$(table).DataTable().rows({page: 'current'}).deselect();
+		$('#btn_ok_{{ oUIBlock.GetOption('sTableId') }}').prop('disabled', true);
+	}
+
+	return true;
+}
+
+{% if oUIBlock.GetOption("select_mode") is defined %}
+	var oSelectedItems{{ oUIBlock.GetOption('sListId') }} = [];
+{% endif %}
\ No newline at end of file