[TYPO3-dev] How to include DataTables in the BE of TYPO3 7.6.x and above

[Michael Schams]

Hi,

What is the best way to include the jQuery plug-in DataTables [1] in the 
Backend of TYPO3 CMS 7.6 and how can I use it?
I tried several ways, but they all fail in 7.6.4.

The HTML source shows that require.js [2], jquery [3] and DataTables [4] 
are included ([2] and [3] from the core, [4] from my extension).
As soon as I include [4], Firebug throws the following error:

--- cut here ---
Error: Mismatched anonymous define() module: function ( $ ) {
"use strict";
return factory( $, window, document );
}
http://requirejs.org/docs/errors.html#mismatch
--- cut here ---

I do not know if this causes problems, JavaScript in my own 
MyExtension.js (see below) file gets executed without problems.
My main problem is, I do not know how to trigger DataTables once 
included.

$('table#mytable').DataTables();
$().DataTables();
$.DataTables();

I included my own CSS and JS files via the be.container ViewHelper [5] 
as follows:

--- cut here ---
<f:be.container
   includeCssFiles="{
     0: 
'{f:uri.resource(path:\'Css/Libraries/jquery.dataTables-1.10.11.min.css\')}',
     1: '{f:uri.resource(path:\'Css/MyExtension.css\')}'
   }"
   includeJsFiles="{
     0: 
'{f:uri.resource(path:\'JavaScript/Libraries/jquery.dataTables-1.10.11.js\')}',
     1: '{f:uri.resource(path:\'JavaScript/MyExtension.js\')}'
   }">

   <!-- more stuff here -->

</f:be.container>
--- cut here ---


Any ideas what I am doing wrong here?


Cheers
Michael

[1] https://www.datatables.net
[2] file: sysext/core/Resources/Public/JavaScript/Contrib/require.js
[3] file: 
sysext/core/Resources/Public/JavaScript/Contrib/jquery/jquery-2.1.4.js
[4] file: 
../typo3conf/ext/myextension/Resources/Public/JavaScript/Libraries/jquery.dataTables-1.10.11.js
[5] 
https://fluidtypo3.org/viewhelpers/fluid/master/Be/ContainerViewHelper.html