0

what's the best way to use the datatable js library in my template file ? I tried like this but it doesn't work :

layout file:

<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>

template file :

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

</script>
4

Remove <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" src_type="url"/> from xml.

  1. Copy jquery.dataTables.min.js inside VendorName/ModuleName/view/frontend/web/js. So location of the file is: VendorName/ModuleName/view/frontend/web/js/jquery.dataTables.min.js

  2. Inside phtml template add following code


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

Clear cache.

-2

In layout file add <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();
    }

    

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.