How can I add this code in Magneto2 admin page.
<html>
<head>
<link rel="Stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#MyTable').DataTable( {
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
//to select and search from grid
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
} );
} );
</script>
</head>
<body>
<table id="MyTable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Postion</th>
<th>Technologies</th>
<th>Company Name</th>
<th>Experience</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Bikesh</td>
<td>Srivastava</td>
<td>Software Engg.</td>
<td>Asp.net</td>
<td>Hytech</td>
<td>4</td>
</tr>
<tr>
<td>Navdeep</td>
<td>Kumar</td>
<td>Sr.Software Engg.</td>
<td>Asp.net</td>
<td>Hytech</td>
<td>8</td>
</tr>
<tr>
<td>Sujata</td>
<td>Sinha</td>
<td>Software Engg.</td>
<td>Asp.net</td>
<td>Hytech</td>
<td>2</td>
</tr>
<tr>
<td>Panakj</td>
<td>Bhanadari</td>
<td>Software Engg.</td>
<td>Asp.net</td>
<td>Hytech</td>
<td>3</td>
</tr>
<tr>
<td>Harikant</td>
<td>Kumar</td>
<td>Web Designer</td>
<td>Asp.net</td>
<td>Hytech</td>
<td>4</td>
</tr>
<tr>
<td>Payal</td>
<td>Agrawal</td>
<td>Software Engg.</td>
<td>Salesforce</td>
<td>Hytech</td>
<td>1</td>
</tr>
<tr>
<td>Pritam</td>
<td>Shekhawat</td>
<td>Manager</td>
<td>Salesforce</td>
<td>Hytech</td>
<td>3</td>
</tr>
<tr>
<td>Saurabh</td>
<td>Kumar</td>
<td>Software Engg.</td>
<td>Asp.net</td>
<td>HytechPro</td>
<td>6</td>
</tr>
<tr>
<td>Vinod</td>
<td>Kumar</td>
<td>Software Engg.</td>
<td>Asp.net</td>
<td>HytechPro</td>
<td>6</td>
</tr>
<tr>
<<td>Manik</td>
<td>Bansal</td>
<td>Software Engg.</td>
<td>SharePoint</td>
<td>HytechPro</td>
<td>3</td>
</tr>
<tr>
<td>Brijesh</td>
<td>Srivastava</td>
<td>Asst.Manager</td>
<td>Pharma</td>
<td>Sun Pharama</td>
<td>6</td>
</tr>
<tr>
<td>Krishu</td>
<td>Srivastava</td>
<td>Software Engg.</td>
<td>Asp.net</td>
<td>Hytech</td>
<td>4</td>
</tr>
</tbody>
</table>
</body>
</html>
I need to show this grid on Magento2 admin page. Any help would be greatly appreciated.
-
Refer to this document for creating admin grid using custom module: mageplaza.com/magento-2-module-development/…nihal malik– nihal malik2021年06月20日 11:47:28 +00:00Commented Jun 20, 2021 at 11:47
2 Answers 2
To archive,this you need to create a custom Module where you will need do below:
Create setup script which will create a table.
Create A model,resource model,Collection for this newsly create Table for read/write data
Create admin section,where you will write the grid.
Below blogs will be help you:
https://webkul.com/blog/create-grid-edit-add-grid-row-and-installer-in-magento2/
https://www.mageplaza.com/magento-2-module-development/create-admin-grid-magento-2.html
-
Thanks for your response. I need above custom grid, so how can I add DataTable Js Library.Rajesh Nagappan– Rajesh Nagappan2017年10月07日 14:26:55 +00:00Commented Oct 7, 2017 at 14:26
-
why you need to add
DataTable Js Library2017年10月07日 14:38:05 +00:00Commented Oct 7, 2017 at 14:38 -
For add new js library you can use webkul.com/blog/include-use-custom-js-file-require-js-magento2 or magento.stackexchange.com/questions/85851/…2017年10月07日 14:41:09 +00:00Commented Oct 7, 2017 at 14:41
You can use pestle for quick magento module generation Create a custom Module.
pestle magento2:generate:module: This will create module.xml and registration.php with your desired module and vendor name in app code dir.
pestle magento2:generate:route: Choose to adminhtml route. It will ask you admin route and controller action names and create etc/adminhtml/routes.xml Controller/Adminhtml/Index/Index.php (according to controller action name you gave) files for you.
pestle magento2:generate:view: This will create view layout for your admin controller. Choose
adminhtmlfor area and {frontname}_index_index (depends on your previous naming ) for layout handle. This will create view/adminhtml/templates/content.phtml and Block\Adminhtml\Main.php (According to block name and template file you specified)Run setup upgrade and di compile. in admin go to your route frontname_controller_action you will see content of your layout phtml (content.phtml).
Add above custom grid into phtml and run cache flush
For adding js you can use require js mechanism if you want to use any custom js library you want to declare it in require first (google it)
Thanks
Explore related questions
See similar questions with these tags.