Как использовать библиотеку js с данными в magento 2?

Как лучше всего использовать библиотеку js с данными в моем файле шаблона? Я пробовал так, но это не работает:

Файл макета: 

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <head>
          <css src="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" src_type="url"/>
          <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" src_type="url"/>
     </head>
    <body>
        <referenceContainer name="content">
            <block
                template="Fmj_Portefeuill::portefeuille.phtml"
                class="Fmj\Portefeuill\Block\portefeuille"
                name="FMJ_portefeuill"/>
        </referenceContainer>
    </body>
</page>

Файл шаблона: 

<table id="portefeuilleTable"> ... </table>
<script>
    require([
        'jquery'
    ], function($){
        $(function(){
                $('#portefeuilleTable').DataTable();
            });
        });

</script>
Author: Ayoub El Hayat, 2017-09-15
Source

2 answers

Удалить из xml.

  1. Копировать jquery.dataTables.min.js внутри Имя поставщика/имя модуля/вид/интерфейс/веб/js. Таким образом, местоположение файла: VendorName/ModuleName/view/frontend/web/js/jquery.dataTables.min.js

  2. Внутри шаблона phtml добавьте следующий код


<script>
    require([
        'jquery',
        'VendorName_ModuleName/js/jquery.dataTables.min'
    ], function($, $t){
        $(document).ready(function() {
            $('#example').DataTable();
        } );
    })
</script>

Очистить кэш.

 6
Author: Sohel Rana, 2017-09-15 14:39:20

В файле макета добавить <head> <css src="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" src_type="url"/> <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" src_type="url"/> </head>

<table class="data-grid" id="example">
    <thead>
    <tr>
        <th class="data-grid-th">ID</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td >1</td>
    </tr>
    <tr>
        <td >2</td>
    </tr>
    </tbody>
</table>


require([
        'jquery',
        'VendorName_ModuleName/js/jquery.dataTables.min'
    ],
    function($, alert) {
        $('#example').DataTable();
    }
 -2
Author: sarvesh Dineshkumar Patel, 2019-06-25 10:11:44