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

【问题标题】：Laravel how to move data from table to another using buttonLaravel如何使用按钮将数据从表移动到另一个
【发布时间】：2022-03-19 12:50:17
【问题描述】：

是否有任何简单的方法可以使用 id 将数据从表移动到另一个表？我想使用 id 获取第一个表中的所有信息，将其插入到另一个表中，然后使用 Laravel 从当前表中删除它。

在我的 Html 表中。例如，我有待处理的预订表，并且有一个操作按钮“接受”，然后如果我单击它，数据将转到接受的预订表。

请参考这张照片。 enter image description here

【问题讨论】：

我想用按钮来保持将数据移动到另一个表的功能。
你是说数据库表还是html表？
在我的 Html 表中。例如，我有待处理的预订表，并且有一个操作按钮“接受”，然后如果我单击它，数据将转到接受的预订表。
我已经编辑了我的帖子，请参考照片。谢谢

标签： javascript php html css laravel

【解决方案1】：

您可以使用sortablejs 来解决问题

从docs查看这个例子

【讨论】：

我如何在 laravel 中使用按钮做到这一点？
没有必要在服务器端使用任何 laravel 功能，一切都在客户端。如果您需要对服务器执行任何操作，例如更改数据库中的列值，您可以在sortablejs 上使用事件options，我认为onEnd 事件可以解决问题并发出ajax 请求来更改它

【解决方案2】：

如果您使用的是 datatable ，那么您可以执行类似的操作

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>

【讨论】：