jQuery DataTables.js How to Apply It On Admin Grid

magento.stackexchange https://magento.stackexchange.com/questions/275978

Question

I'm very new to Magneto, I'm trying to add jQuery DataTables in Magento 2.3, in below image i get error in console:

Here is my Code:

Add file in /EC/Downloads/view/adminhtml/requirejs-config.js.

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

includ css file like below in /EC/Downloads/view/adminhtml/layout/downloads_index_reports.xml

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

I moved my css and js files into respective folders. e.g /EC/Downloads/view/adminhtml/web/js/datatables.min.js /EC/Downloads/view/adminhtml/web/css/datatables.min.css

I used below code in my template file to load DataTable.

<table>
  ....
</table>

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

Seems DataTable is not loading, getting below error in console: enter image description here

Thanks in advance

Was it helpful?

Solution

As i was somewhere else maybe mentally :P... Their were too many typo in my code:

In /EC/Downloads/view/adminhtml/requirejs-config.js.

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

In /EC/Downloads/view/adminhtml/layout/downloads_index_reports.xml

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

In /EC/Downloads/view/adminhtml/templates/test.phtml

<table>
   ...
</table>

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

Run these command:

sudo rm -rf var/ pub/static/adminhtml generated/
sudo php bin/magento setup:di:compile
sudo php bin/magento setup:static-content:deploy
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top