<button class="btn btn-primary" onclick="document.getElementById('editStatus').style.display = 'none';"> Add Prices Update </button> <table id="updatePrices" class="table display table-striped table-bordered table-hover table-sm" cellspacing="0" width="100%"> <thead> <tr> <th></th> <th>Id</th> <th>Status</th> <th>Timing</th> <th>Create At</th> <th>Update At</th> </tr> </thead> <!-- <tfoot> <tr> <th></th> <th>Id</th> <th>Status</th> <th>Timing</th> <th>Create At</th> <th>Update At</th> </tr> </tfoot> --> </table> <?php include "EditStatus.php" ?> <script type="text/javascript"> $(document).ready(function() { var table = $('#updatePrices').DataTable( { //"buttons": true, "ajax": "api/v1/Update_Prices/updatePricesData.txt", "columns": [ { "className": 'edit', "orderable": false, "data": null, "defaultContent": 'Edit' }, { "data": "Id"}, { "data": "Status" }, { "data": "Timing" }, { "data": "Create_At" }, { "data": "Update_At" }, ], "order": [[1, 'asc']], select: true } ); // Add event listener for opening and closing details $('#updatePrices tbody').on('click', 'tr td.edit', function () { var tr = $(this).closest('tr'); var row = table.row( tr ); var id = row.data()['Id']; var status= row.data()['Status']; // var id = table.row( this ).data()['Id']; document.getElementById('id').value = id; document.getElementById('status').value = status; document.getElementById('editStatus').style.display = 'block'; } ); $('#updatePrices tbody').on('click', 'tr', function () { var tr = $(this).closest('tr'); var row = table.row( tr ); alert(row.data()['Id']); document.cookie = "updatePricesId="+row.data()['Id']; // document.cookie = "customerName="+row.data()['Id']; //window.location.href = 'index.php'; open_script(); } ); } ); function open_script(){ window.location.assign('/updatePricesData.php');//there are many ways to do this } </script>