jQuery DataTables.js How to Apply It On Admin Grid
-
02-03-2021 - |
문제
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:
Thanks in advance
해결책
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