magento 2にjQueryデータテーブルを追加する

requirejsを使用して、magento-2フロントエンドでjquery DataTablesを使用しようとしています。netbles.min.jsファイルがネットパネルに表示されます が、どういうわけか次のエラーが発生します。

私reuirejs-config.jsはこのように見えます

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

};

そして、私はこの関数をテンプレートファイルで次のように呼び出しています

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

私はjsファイルをロードする順番に問題があると思います。シム構成を試してみましたが、うまくいきませんでした。シム構成に誤りがある可能性があります

スクリプトに別の問題があると思います。jqueryとdatatableの両方を依存関係として定義しました。ただし、jqueryを関数に渡すだけです。requirejsスクリプトの関数部分には、依存関係スクリプトオブジェクトを関数部分に渡す必要があります。試してください：

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

シム部分については、次のように定義していると思います。

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

その後、それは結構です。それは私にとってはうまくいくように見えますが、「shim」を囲む余分な引用符はMagento 2のドキュメントにのみ存在し、requirejsのドキュメントには存在しません。どちらが正しいかわからない

テンプレートファイルのスクリプトを使用してjqueryを追加できます。reuirejs-config.jsに依存関係を追加する必要はありません。

ここにスクリプトを配置しました。これを試してください。

<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);
});