0

I am including datatable plugin to my custom module.

I tried in this way, below is the code of my Vendor/Module/view/frontend/requirejs-config.js

 var config = {
    map: {
   '*': {
       dataTables: 'Vendor_Module/js/datatables.min'
     }
   }
 };

including css file like below in Vendor/Module/view/frontend/layout/default.xml

 <?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
    <css src="Vendor_Module::css/datatables.min.css"/>
</head>

And i moved my css and js files into respective folders inside web folder. Vendor/Module/view/frontend/web/css/datatables.min.css Vendor/Module/view/frontend/web/js/datatables.min.js

I have used below code in my template file to load Datatable.

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

seems datatable is not loading. and getting below error in console.

Uncaught Error: Script error for: jquery

Please anyone suggest me where i am wrong. Thanks

1

Please check all steps in your module.

Create requirejs-config.js at /app/code/Vendor/Module/view/frontend

var config = {
   map: {
       '*': {
           dataTableJs: 'Vendor_Module/js/jquery.dataTables.min'
       }
   }
};

Then, Add css in xml file at app/code/Vendor/Module/view/frontend/layout

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Vendor_Module::css/jquery.dataTables.min.css"/>
    </head>

    <body>      
        <!-- Your content -->
    </body>
</page>

Add code in your phtml file :

<script type="text/javascript">
require(['jquery', 'jquery/ui','dataTableJs'], function($){ 
    $(document).ready(function($){
        $('#example').DataTable();
    });
});

Now, execute this command

php bin/magento s:up
php bin/magento s:s:d -f
php bin/magento c:c

Go to pub/static/_requirejs/frontend/Namespace/Theme/en_US/requirejs-config.js and find this below line available in this file or not.

dataTableJs: 'Vendor_Module/js/jquery.dataTables.min'

Under pub/static/_requirejs/frontend/Namespace/Theme/en_US, delete the file requirejs-config.js.

Refresh your page and it will be generated again with new content.

If it doesn't work delete the requirejs-config.js and run the following commands:

php bin/magento c:c
php bin/magento c:f
php bin/magento s:up
php bin/magento s:d:c
  • hi @Rohan, what i am missing there, i am also doing the same is it? – jafar pinjar Oct 17 '18 at 10:46
  • Did you deploy after add js in requirejs-config? Please check in pub/static that your code available in that file or not? – Rohan Hapani Oct 17 '18 at 10:48
  • yes, i deployed, files are there, i checked – jafar pinjar Oct 17 '18 at 10:50
  • Please check my updated answer. Please check in that file that your file line available or not. – Rohan Hapani Oct 17 '18 at 10:51
  • I don't have any file called _requirejs inside pub/static, have only frontend,adminhtml folders and deployed_version file – jafar pinjar Oct 17 '18 at 11:00

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.