Fügen Sie jQuery Datatables in Magento 2 hinzu

Ich versuche, die jquery DataTables im Magento-2-Frontend mit den requirejs zu verwenden. Ich kann die Datei datables.min.js im Netzfenster sehen, aber irgendwie gibt es den folgenden Fehler.

Mein reuirejs-config.jssieht so aus

var config = {
    map: {
        '*': {
            dataTable: 'Ktpl_Slider/js/datatables.min'
        }
    }

};

Und ich rufe diese Funktion in einer Vorlagendatei wie folgt auf

<script type="application/javascript">
    requirejs(['jquery','dataTable'],function($){
        $(document).ready(function(){
            $('#list-table').DataTable();
        });
    });
</script>

Ich denke, es gibt ein Problem mit der Reihenfolge des Ladens der js-Dateien. Ich habe es mit der Shim-Konfiguration versucht, aber das hat nicht funktioniert. Vielleicht gab es einen Fehler in der Shim-Konfiguration

Ich denke, dass Sie ein anderes Problem in Ihrem Skript haben. Sie haben sowohl jquery als auch datatable als Abhängigkeiten definiert. Sie übergeben jedoch nur die Abfrage an die Funktion. Im Funktionsteil des Skripts requirejs sollte das Objekt für Abhängigkeitsskripte an den Funktionsteil übergeben werden. Versuchen:

<script type="application/javascript">
requirejs(['jquery','dataTable'],function($, dataTable){
    $(document).ready(function(){
        $('#list-table').DataTable();
    });
});

Was den Shim-Teil betrifft, denke ich, wenn Sie ihn so definiert haben wie:

var config = {
    map: {
        '*': {
            dataTable: 'Ktpl_Slider/js/datatables.min'
        }
    },
    "shim" {
        "dataTable" : ["jquery"]
    }
};

dann ist es gut Sieht so aus, als würde es bei mir funktionieren. Die zusätzlichen Anführungszeichen um "shim" sind jedoch nur in der Magento 2-Dokumentation und nicht in der erforderlichen Dokumentation enthalten. also nicht sicher, welches richtig ist.

Sie können jquery mit Ihrem Skript in der Vorlagendatei hinzufügen, ohne dass eine Abhängigkeit in reuirejs-config.js hinzugefügt werden muss

Ich habe mein Skript hier abgelegt, bitte versuchen Sie es.

<script type="text/javascript">
require(['jquery', 'DataTable'],function($){
    (function() {
         $('#relatedProductTable').DataTable({
              "aaData":<?php echo json_encode($dataProducts);?>,
              "aoColumnDefs":[{
                    "sTitle":"Site name"
                  , "aTargets": [ "site_name" ]
              }]);
                    })(jQuery);
});