title: passing a specific row of data to a modal (laravel datatables plugin)
body: <p>i have this page</p>
  
  <p><a href="https://i.stack.imgur.com/J173D.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J173D.png" alt="enter image description here"></a></p>
  
  <p>and i have this modal</p>
  
  <p><a href="https://i.stack.imgur.com/5keBe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5keBe.png" alt="enter image description here"></a></p>
  
  <p>now i what i want to do is when i click on the "Editar" button of the row that contains the ID Cartão of "1011022" it should show like this:</p>
  
  <p><a href="https://i.stack.imgur.com/OImmT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OImmT.png" alt="enter image description here"></a></p>
  
  <p>with the values belonging to that row</p>
  
  <p>how do i do that ? i've already searched for at least an hour and i couldn't find any reliable solutions</p>
  
  <p>my html code is as follows:</p>
  
  <pre><code>@extends('admin.layouts.layout')
  @section('content')
  &lt;!-- page script --&gt;
  &lt;div class="wrapper row-offcanvas row-offcanvas-left"&gt;
      &lt;!-- Right side column. Contains the navbar and content of the page --&gt;
      &lt;aside class="right-side"&gt;                
          &lt;!-- Content Header (Page header) --&gt;
          &lt;section class="content-header"&gt;
              &lt;h1&gt;
                  Lista de alunos
              &lt;/h1&gt;
          &lt;/section&gt;
          &lt;!-- Main content --&gt;
          &lt;section class="content"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-xs-12"&gt;
                      &lt;div class="box"&gt;
                          &lt;div class="box-header"&gt;
                          &lt;/div&gt; &lt;!-- /.box-header --&gt;
                          &lt;div class="box-body table-responsive"&gt;
                              &lt;button type="button" id="add_btn" class="btn btn-primary" data-toggle="modal" data-target="#addAluno"&gt;
                                  &lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;&amp;nbsp;
                                  Adicionar aluno
                              &lt;/button&gt;
  
                              &lt;br/&gt;&lt;br/&gt;
  
                              &lt;!-- ADD MODAL SECTION --&gt;
                              &lt;div id="addAluno" class="modal fade" role="dialog"&gt;
                                &lt;div class="modal-dialog"&gt;
                                  &lt;!-- Modal content--&gt;
                                  &lt;div class="modal-content"&gt;
                                    &lt;div class="modal-header"&gt;
                                      &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                                      &lt;h4 class="modal-title"&gt;Adicionar aluno&lt;/h4&gt;
                                    &lt;/div&gt;
                                    &lt;div class="modal-body"&gt;
                                      &lt;form role="form"&gt;
                                       &lt;div class="form-group"&gt;
                                          &lt;label&gt;ID do Cartão&lt;/label&gt;
                                            &lt;input type="text" class="form-control" id="id_cartao" placeholder="ID do Cartão"/&gt;
                                        &lt;/div&gt;
                                        &lt;div class="form-group"&gt;
                                          &lt;label&gt;Nome do Aluno&lt;/label&gt;
                                            &lt;input type="text" class="form-control"
                                                id="nome_aluno" placeholder="Nome do Aluno"/&gt;
                                        &lt;/div&gt;
                                        &lt;div class="form-group"&gt;
                                          &lt;label&gt;Email&lt;/label&gt;
                                            &lt;input type="email" class="form-control" id="email" placeholder="E-mail"/&gt;
                                        &lt;/div&gt;
                                        &lt;div&gt;
                                          &lt;label&gt;Triénio&lt;/label&gt;
                                            &lt;input type="text" class="form-control" id="trienio" placeholder="Triénio"/&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                    &lt;div class="modal-footer"&gt;
                                      &lt;button type="button" class="btn btn-primary"&gt;Adicionar aluno&lt;/button&gt;
                                      &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Fechar&lt;/button&gt;
                                    &lt;/div&gt;
                                  &lt;/div&gt;
                                &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;!-- END OF THE ADD MODAL SECTION --&gt;
  
                              &lt;!-- EDIT MODAL SECTION --&gt;
                              &lt;div id="editAluno" class="modal fade" role="dialog"&gt;
                                &lt;div class="modal-dialog"&gt;
                                  &lt;!-- Modal content--&gt;
                                  &lt;div class="modal-content"&gt;
                                    &lt;div class="modal-header"&gt;
                                      &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                                      &lt;h4 class="modal-title"&gt;Editar aluno&lt;/h4&gt;
                                    &lt;/div&gt;
                                    &lt;div class="modal-body"&gt;
                                      &lt;form role="form"&gt;
                                       &lt;div class="form-group"&gt;
                                          &lt;label&gt;ID do Cartão&lt;/label&gt;
                                            &lt;input type="text" class="form-control" id="id_cartao" placeholder="ID do Cartão" value=&gt;
                                        &lt;/div&gt;
                                        &lt;div class="form-group"&gt;
                                          &lt;label&gt;Nome do aluno&lt;/label&gt;
                                            &lt;input type="text" class="form-control"
                                                id="nome_aluno" placeholder="Nome do Aluno"/&gt;
                                        &lt;/div&gt;
                                        &lt;div class="form-group"&gt;
                                          &lt;label&gt;Email&lt;/label&gt;
                                            &lt;input type="email" class="form-control" id="email" placeholder="E-mail"/&gt;
                                        &lt;/div&gt;
                                        &lt;div&gt;
                                          &lt;label&gt;Triénio&lt;/label&gt;
                                            &lt;input type="text" class="form-control" id="trienio" placeholder="Triénio"/&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                    &lt;div class="modal-footer"&gt;
                                      &lt;button type="button" class="btn btn-primary"&gt;Editar aluno&lt;/button&gt;
                                      &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Fechar&lt;/button&gt;
                                    &lt;/div&gt;
                                  &lt;/div&gt;
                                &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;!-- END OF THE EDIT MODAL SECTION --&gt;
  
                              &lt;table id="alunos_list" class="table table-bordered table-striped"&gt;
                                  &lt;thead&gt;
                                      &lt;tr&gt;     
                                          &lt;th&gt;ID Cartão&lt;/th&gt;
                                          &lt;th&gt;Nome&lt;/th&gt;
                                          &lt;th&gt;E-mail&lt;/th&gt;
                                          &lt;th&gt;Triénio&lt;/th&gt;
                                          &lt;th&gt;Curso&lt;/th&gt;
                                          &lt;th&gt;Ações&lt;/th&gt;
                                      &lt;/tr&gt;
                                  &lt;/thead&gt;
                                  &lt;tfoot&gt;
                                      &lt;tr&gt;
                                          &lt;th&gt;ID Cartão&lt;/th&gt;
                                          &lt;th&gt;Nome&lt;/th&gt;
                                          &lt;th&gt;E-mail&lt;/th&gt;
                                          &lt;th&gt;Triénio&lt;/th&gt;
                                          &lt;th&gt;Curso&lt;/th&gt;
                                          &lt;th&gt;Ações&lt;/th&gt;
                                      &lt;/tr&gt;
                                  &lt;/tfoot&gt;
                                  &lt;tfoot&gt;
                                  &lt;/tfoot&gt;
                              &lt;/table&gt;
                          &lt;/div&gt;&lt;!-- /.box-body --&gt;
                      &lt;/div&gt;&lt;!-- /.box --&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt;&lt;!-- /.content --&gt;
      &lt;/aside&gt;&lt;!-- /.right-side --&gt;
  &lt;/div&gt;&lt;!-- ./wrapper --&gt;
  @endsection
  
  @push('scripts')
  &lt;script&gt;
          $(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();
                              });
                          }
                      });
                  }
              });
          });
  &lt;/script&gt;
  &lt;script&gt;
  
  &lt;/script&gt;
  @endpush
  </code></pre>