'Laravel how to move data from table to another using button

Is there any simple way to move data from table to another table using the id? I want to get all the info inside the first table using the id, insert it to another table, and then delete it from current one using Laravel.

In my Html table. For example I have pending reservation table and there's an action button "accept" then if I will click it the data will go to the accepted reservation table.

Pleaser refer to this photo. enter image description here

javascriptphphtmlcsslaravel


Solution 1:[1]

you can use sortablejs to do the trick

check this example from the docs

Solution 2:[2]

if you are using datatable , then you can do something like that

var table1 = $("#pending").DataTable();
var table2 = $("#reserved").DataTable();

$(document).on("click", "#pending .move", function () {
  var row = table1.row( $(this).parents('tr') );
    var rowNode = row.node();
    row.remove();
 
    table2
        .row.add( rowNode )
        .draw();
});


$(document).on("click", "#reserved .move", function () {
  var row =table2.row( $(this).parents('tr') );
    var rowNode = row.node();
    row.remove();
 
    table1
        .row.add( rowNode )
        .draw();
});
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<table id="pending" class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td><button type="button" class="btn btn-primary btn-sm move">move</button></td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td><button type="button" class="btn btn-primary btn-sm move">move</button></td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td><button type="button" class="btn btn-primary btn-sm move">move</button></td>
    </tr>
  </tbody>
</table>

<table id="reserved" class="table mt-5">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Action</th>
     
    </tr>
  </thead>
  <tbody>
  
   
  </tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 shabandino
Solution 2 rootShiv

Related Questions