如何使用 laravel 中的数据表在模态中获取变量？答案

【问题标题】：How to get a variable in a modal using datatable in laravel?如何使用 laravel 中的数据表在模态中获取变量？
【发布时间】：2020-08-19 16:02:12
【问题描述】：

我在 laravel 中使用 yajra 数据表，并且我有一个显示模式的“revisar”按钮（如下图所示）：

modal show

我想用数据库的“详细信息”字段中的信息填充这个文本区域，这些信息对于数据表的每个项目都明显不同，您将如何获取该数据？我想过从可以从数据表的控制器发送的 partials.actions 的变量中获取它，但我无法在刀片视图中获取该变量。

我的 partials.actios 视图：

<a href="{{ route('tareas.createfrom', Hashids::encode($id)) }}" class="btn btn-sm btn-success">
    <i class="fas fa-fw fa-plus"></i>
    Tarea
</a>
<a href="{{ route('solicituds.show', Hashids::encode($id)) }}" class="btn btn-sm btn-info">
    <i class="fas fa-fw fa-eye"></i>
    Ver
</a>
<button type="button" data-id="{{ $id }}" data-toggle="modal" data-target="#RevisaSolicitudModal" class="btn btn-warning btn-sm revisar" id="getActualizaId">
    <i class="fas fa-fw fa-check-circle"></i>
    Revisar
</button>
<button type="button" data-id="{{ $id }}" data-toggle="modal" data-target="#DeleteProductModal" class="btn btn-danger btn-sm" id="getDeleteId">
    <i class="fas fa-fw fa-trash"></i>
    Eliminar
</button>

也许我可以使用JS在modal中获取变量“$detail”，我不知道

【问题讨论】：

标签： javascript laravel datatables

【解决方案1】：

查看引导文档：https://getbootstrap.com/docs/4.4/components/modal/#varying-modal-content

<button type="button" data-id="{{ $id }}" data-toggle="modal" data-target="#RevisaSolicitudModal" class="btn btn-warning btn-sm revisar" id="getActualizaId">
    <i class="fas fa-fw fa-check-circle"></i>
    Revisar
</button>

...

<script>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var id = button.data('id') // Extract info from data-* attributes
  ...
})
</script>

【讨论】：

【解决方案2】：

我的方法有效：

1.控制器：

          return \Yajra\DataTables\DataTables::of($trxDatatables)
                ->addIndexColumn()
                ->addColumn('action', function($row){
                    
                    $stEditRoute = route('admission.students.edit',$row->id);
                    $stShowRoute = route('admission.students.show',$row->id);
                    $btns = '<button class="btn btn-danger btn-xs
                              deleteModalTriggerBtn " id="deleteModalTriggerBtn"  
                              data-catid='.$row->id.' data-toggle="modal"
                              data-target="#delete"><span class="glyphicon glyphicon-trash" title="Delete Center"/></button>';
                    return $btns;
                })
                ->rawColumns(['action'])
                ->toJson();

jquery：

 $(document).ready(function () {

   // used the following technique so that I can use the custom attribute (data-catid)  value of the trigger button (id="delete") when delete ajax is called.

   $(function() {

       var stId = null;
       function getCatId() {
           $('#delete').on('show.bs.modal', function (event) {
               var button = $(event.relatedTarget) // Button that triggered the modal
               var id = button.data('catid'); // Extract info from data-* attributes
               stId = id;

           });

       }

       getCatId();



   $('.modal-footer').on('click', '.delete', function(e) {
       e.preventDefault();
       var token = $("meta[name='csrf-token']").attr("content");

       var reason = $("#reason option:selected").text();
       var notice = $("#notice").val();
       $.ajax({
           type: 'DELETE',
           url: 'http://yoursite.test/workplace/admission/students/'+stId,
           data: {
               'id': stId,
               'reason': reason,
               'notice': notice,
               "_token": token,
           },
           success: function (data) {

               // console.log(data);
               // $('.item' + $('.id').text()).remove();
           }
       });
   });

   });

     });

【讨论】：