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

Improve this question

1 Answer 1

Reset to default
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
Improve this answer
7
  • hi @Rohan, what i am missing there, i am also doing the same is it?
    – Jafar Pinjar
    Oct 17, 2018 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, 2018 at 10:48
  • yes, i deployed, files are there, i checked
    – Jafar Pinjar
    Oct 17, 2018 at 10:50
  • Please check my updated answer. Please check in that file that your file line available or not.
    – Rohan Hapani
    Oct 17, 2018 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, 2018 at 11:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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