передавая определенную строку данных в модальной (Laravel DataTables плагин)

Question

у меня есть эта страница

и у меня есть этот модальных

теперь я, что я хочу do, когда я нажимаю кнопку «Editar» в строке, которая содержит ID Cartão «1011022», она должна выглядеть так:

со значениями, принадлежащих к этой строке

как я сделать это? я уже искал, по крайней мере, один час и я не мог найти какие-либо надежные решения

моего HTML-код выглядит следующим образом:

@extends('admin.layouts.layout') 
@section('content') 
<!-- page script --> 
<div class="wrapper row-offcanvas row-offcanvas-left"> 
    <!-- Right side column. Contains the navbar and content of the page --> 
    <aside class="right-side">     
     <!-- Content Header (Page header) --> 
     <section class="content-header"> 
      <h1> 
       Lista de alunos 
      </h1> 
     </section> 
     <!-- Main content --> 
     <section class="content"> 
      <div class="row"> 
       <div class="col-xs-12"> 
        <div class="box"> 
         <div class="box-header"> 
         </div> <!-- /.box-header --> 
         <div class="box-body table-responsive"> 
          <button type="button" id="add_btn" class="btn btn-primary" data-toggle="modal" data-target="#addAluno"> 
           <span class="glyphicon glyphicon-plus"></span>&nbsp; 
           Adicionar aluno 
          </button> 

          <br/><br/> 

          <!-- ADD MODAL SECTION --> 
          <div id="addAluno" class="modal fade" role="dialog"> 
           <div class="modal-dialog"> 
           <!-- Modal content--> 
           <div class="modal-content"> 
            <div class="modal-header"> 
            <button type="button" class="close" data-dismiss="modal">&times;</button> 
            <h4 class="modal-title">Adicionar aluno</h4> 
            </div> 
            <div class="modal-body"> 
            <form role="form"> 
            <div class="form-group"> 
             <label>ID do Cartão</label> 
              <input type="text" class="form-control" id="id_cartao" placeholder="ID do Cartão"/> 
             </div> 
             <div class="form-group"> 
             <label>Nome do Aluno</label> 
              <input type="text" class="form-control" 
               id="nome_aluno" placeholder="Nome do Aluno"/> 
             </div> 
             <div class="form-group"> 
             <label>Email</label> 
              <input type="email" class="form-control" id="email" placeholder="E-mail"/> 
             </div> 
             <div> 
             <label>Triénio</label> 
              <input type="text" class="form-control" id="trienio" placeholder="Triénio"/> 
             </div> 
            </div> 
            <div class="modal-footer"> 
            <button type="button" class="btn btn-primary">Adicionar aluno</button> 
            <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button> 
            </div> 
           </div> 
           </div> 
          </div> 
          <!-- END OF THE ADD MODAL SECTION --> 

          <!-- EDIT MODAL SECTION --> 
          <div id="editAluno" class="modal fade" role="dialog"> 
           <div class="modal-dialog"> 
           <!-- Modal content--> 
           <div class="modal-content"> 
            <div class="modal-header"> 
            <button type="button" class="close" data-dismiss="modal">&times;</button> 
            <h4 class="modal-title">Editar aluno</h4> 
            </div> 
            <div class="modal-body"> 
            <form role="form"> 
            <div class="form-group"> 
             <label>ID do Cartão</label> 
              <input type="text" class="form-control" id="id_cartao" placeholder="ID do Cartão" value=> 
             </div> 
             <div class="form-group"> 
             <label>Nome do aluno</label> 
              <input type="text" class="form-control" 
               id="nome_aluno" placeholder="Nome do Aluno"/> 
             </div> 
             <div class="form-group"> 
             <label>Email</label> 
              <input type="email" class="form-control" id="email" placeholder="E-mail"/> 
             </div> 
             <div> 
             <label>Triénio</label> 
              <input type="text" class="form-control" id="trienio" placeholder="Triénio"/> 
             </div> 
            </div> 
            <div class="modal-footer"> 
            <button type="button" class="btn btn-primary">Editar aluno</button> 
            <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button> 
            </div> 
           </div> 
           </div> 
          </div> 
          <!-- END OF THE EDIT MODAL SECTION --> 

          <table id="alunos_list" class="table table-bordered table-striped"> 
           <thead> 
            <tr>  
             <th>ID Cartão</th> 
             <th>Nome</th> 
             <th>E-mail</th> 
             <th>Triénio</th> 
             <th>Curso</th> 
             <th>Ações</th> 
            </tr> 
           </thead> 
           <tfoot> 
            <tr> 
             <th>ID Cartão</th> 
             <th>Nome</th> 
             <th>E-mail</th> 
             <th>Triénio</th> 
             <th>Curso</th> 
             <th>Ações</th> 
            </tr> 
           </tfoot> 
           <tfoot> 
           </tfoot> 
          </table> 
         </div><!-- /.box-body --> 
        </div><!-- /.box --> 
       </div> 
      </div> 
     </section><!-- /.content --> 
    </aside><!-- /.right-side --> 
</div><!-- ./wrapper --> 
@endsection 

@push('scripts') 
<script> 
     $(function() { 
      $('#alunos_list').DataTable({ 
       processing: true, 
       serverSide: true, 
       ajax: '{!! route('alunos.data') !!}', 
       columns: [ 
        { data: 'id_cartao', name: 'alunos.id_cartao' }, 
        { data: 'nome', name: 'alunos.nome' }, 
        { data: 'email', name: 'alunos.email' }, 
        { data: 'trienio.data_trienio', name: 'trienio.data_trienio' }, 
        { data: 'trienio.curso.curso', name: 'trienio.curso.curso' }, 
        { data: 'action', name: 'action', orderable: false, searchable: false } 
       ], 

       initComplete: function() { 
        this.api().columns().every(function() { 
         var column = this; 
         if(column[0][0] == 5){ 
          // intentionally empty, we want to exclude column 5 from searching 
         } else { 
          var input = document.createElement("input"); 
          $(input).appendTo($(column.footer()).empty()) 
          .on('keypress', function() { 
           column.search($(this).val(), false, false, true).draw(); 
          }); 
         } 
        }); 
       } 
      }); 
     }); 
</script> 
<script> 

</script> 
@endpush 

Answer 1

Внутри вашей кнопки редактора, поставить цель данных целевой режимных редакторов. После этого, мы слушаем для шоу случае модальный, когда он показать/показано, как следующее:

Html

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editAluno"> 
    <span class="glyphicon glyphicon-plus"></span>&nbsp;Edit 
</button> 

Js

Вы можете выбрать либо show.bs.modal или shown.bs.modal, рекомендуется просто прослушать show.bs.modal, так как вы хотите заполнить данные немедленно после нажатия кнопки. Уведомление relatedTarget:

// listening for show event of editAluno's modal 
$('#editAluno').on('show.bs.modal', function (e) { 
    var target = e.relatedTarget; 
    // get values for particular rows 
    var tr = $(target).closest('tr'); 
    var tds = tr.find('td'); 

    // put values into editor's form elements 
    // tds.eq(0).val() -- 1st column 
    $('#id_cartao').val(tds.eq(0).val()); 
    // tds.eq(1).val() -- 2nd column and so on. 
    // same goes to others element 
});