forward_station_server_fss/api/v1/Suppliers/supplierDetails.php

<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>