Laravel 如何使用按钮将数据从表移动到另一个

Question

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

Answer 1

you can use sortablejs to do the trick

check this example from the docs

Answer 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/bootstrap@5.1.3/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>