Forward_Station_Server/api/v1/Customers/vehicles.php

<button class="btn btn-primary" onclick="document.getElementById('addForm').style.display = 'block';document.getElementById('editForm').style.display = 'none';"> Add Vehicle </button>
<table id="vehicle" 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>Number</th>
          <!-- <th>Vehicle Id</th> -->
          <!-- <th>Vehicle Number</th> -->
        </tr>
      </thead>

        <tfoot>
            <tr>
                <th></th>
                <th></th>
                <th>Id</th>
                <th>Number</th>
                <!-- <th>Vehicle Id</th> -->
                <!-- <th>Vehicle Number</th> -->
            </tr>
        </tfoot>
    </table>


<script type="text/javascript">
/* Formatting function for row details - modify as you need */
// function format ( d ) {
//     // `d` is the original data object for the row
//     return '<table id="vehicle" class="table table-bordered table-sm" cellspacing="0" width="100%" style="background-color:#3F51B5;color:white;">'+
//         '<tr>'+
//             '<td>Supplier Id:</td>'+
//             '<td>'+d.Id+'</td>'+
//         '</tr>'+
//         '<tr>'+
//             '<td>Supplier Name:</td>'+
//             '<td>'+d.Number+'</td>'+
//         '</tr>'+
        // '<tr>'+
        //     '<td>Delivery Car Number:</td>'+
        //     '<td>'+d.DeliveryCarNumber+'</td>'+
        // '</tr>'+
        // '<tr>'+
        //     '<td>OrderPrice:</td>'+
        //     '<td>'+d.OrderPrice+'</td>'+
        // '</tr>'+
        // '<tr>'+
        //     '<td>OrderVolume:</td>'+
        //     '<td>'+d.OrderVolume+'</td>'+
        // '</tr>'+
        // '<tr>'+
        //     '<td>DeliverVolume:</td>'+
        //     '<td>'+d.DeliverVolume+'</td>'+
        // '</tr>'+
        // '<tr>'+
        //     '<td>FuelPoints:</td>'+
        //     '<td>'+d.FuelPoints+'</td>'+
        // '</tr>'+
        // '<tr>'+
        //     '<td>TankGroup:</td>'+
        //     '<td>'+d.TankGroup+'</td>'+
        // '</tr>'+
        // '<tr>'+
        //     '<td>Tank id</td>'+
        //     '<td>Start Volume</td>'+
        //     '<td>End Volume</td>'+
        //     '<td>Input Volume</td>'+
        // '</tr>'+
        // '<tr>'+
        //     '<td>Fp id</td>'+
        //     '<td>Start Volume</td>'+
        //     '<td>End Volume</td>'+
        //     '<td>Output Volume</td>'+
        // '</tr>'+
//     '</table>';
// }
 // '<table>'+
 //        '<tr>'+
 //            '<th>Tank Id</th>'+
 //            '<th>Start Volume</th>'+
 //            '<th>End Volume</th>'+
 //            '<th>Input Volume</th>'+
 //        '<tr>'+
 //    '</table>'
$(document).ready(function() {
    var table = $('#vehicle').DataTable( {
        "buttons": true,
        "ajax": "api/v1/Customers/vehicles.txt",
        "columns": [
            // {
            //     "className":      'details-control',
            //     "orderable":      false,
            //     "data":           null,
            //     "defaultContent": ''
            // },
            {
                "className":      'delete',
                "orderable":      false,
                "data":           null,
                "defaultContent": 'Delete'
            },
            {
                "className":      'edit',
                "orderable":      false,
                "data":           null,
                "defaultContent": 'Edit'
            },
            { "data": "Id" },
            { "data": "Number" },
            // { "data": "Credit_Sale" },
            //{ "data": "Id" },
            //{ "data": "Number" },
        ],
        "order": [[1, 'asc']]
    } );
     
    // Add event listener for opening and closing details
    // $('#vehicle tbody').on('click', 'td.details-control', function () {
    //     var tr = $(this).closest('tr');
    //     var row = table.row( tr );
 
    //     if ( row.child.isShown() ) {
    //         // This row is already open - close it
    //         row.child.hide();
    //         tr.removeClass('shown');
    //     }
    //     else {
    //         // Open this row
    //         row.child( format(row.data()) ).show();
    //         tr.addClass('shown');
    //     }
    // } );


    // Add event listener for opening and closing details
    $('#vehicle 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'];
        
        //console.log( table.row( this ).data() );
        //alert( table.row( this ).data()['Customer_Id'] );

    } );

        // Add event listener for opening and closing details
    $('#vehicle tbody').on('click', 'tr td.edit', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );

        // console.log( table.row( this ).data() );
        // alert( table.row( this ).data()['Name'] );
        var username = table.row( this ).data()['Name'];
        var creditSale = table.row( this ).data()['Credit_Sale'];
        var id = table.row( this ).data()['Customer_Id'];
        var vehicle_id = table.row( this ).data()['Id'];
        var number = table.row( this ).data()['Number'];

        document.getElementById('username').value = username;
        document.getElementById('id').value = id;
        document.getElementById('vehicle_id').value = vehicle_id;
        document.getElementById('number').value = number;

        if (creditSale=='Yes') {
        document.getElementById('creditSale').checked = true;
        }else if(creditSale=='No'){
        document.getElementById('creditSale').checked = false;
        }
        document.getElementById('editForm').style.display = 'block';
        document.getElementById('addForm').style.display = 'none';
    } );

} );
</script>