<button class="btn btn-primary" onclick="document.getElementById('addSForm').style.display = 'block';"> New supplier </button> <table id="supplier" class="table display table-striped table-bordered table-hover table-sm" cellspacing="0" width="100%"> <thead> <tr> <th></th> <th></th> <th>Id</th> <th>Name</th> </tr> </thead> <tfoot> <tr> <th></th> <th></th> <th>Id</th> <th>Name</th> </tr> </tfoot> </table> <?php include "addSupplier.php" ?> <script type="text/javascript"> $(document).ready(function() { var table = $('#supplier').DataTable( { "buttons": true, "ajax": "api/v1/Suppliers/suppliers.txt", "columns": [ { "className": 'delete', "orderable": false, "data": null, "defaultContent": 'Delete' }, { "className": 'edit', "orderable": false, "data": null, "defaultContent": 'Edit' }, { "data": "Id" }, { "data": "Name"}, ], "order": [[1, 'asc']], select: true } ); // Add event listener for opening and closing details $('#supplier tbody').on('click', 'td.delete', function () { var tr = $(this).closest('tr'); var row = table.row( tr ); var username = table.row( this ).data()['Name']; var id = table.row( this ).data()['Customer_Id']; document.getElementById('deleteid').value = id; document.getElementById('deleteForm').style.display = 'block'; document.getElementById('editForm').style.display = 'none'; document.getElementById('addForm').style.display = 'none'; } ); // Add event listener for opening and closing details $('#supplier tbody').on('click', 'tr td.edit', function () { var tr = $(this).closest('tr'); var row = table.row( tr ); var username = table.row( this ).data()['Name']; var creditSale = table.row( this ).data()['Credit_Sale']; var id = table.row( this ).data()['Customer_Id']; document.getElementById('username').value = username; document.getElementById('id').value = id; if (creditSale=='Yes') { document.getElementById('creditSaleOn').checked = true; }else if(creditSale=='No'){ document.getElementById('creditSaleOff').checked = true; } document.getElementById('editForm').style.display = 'block'; document.getElementById('addForm').style.display = 'none'; document.getElementById('deleteForm').style.display = 'none'; } ); } ); </script>