passing a specific row of data to a modal (laravel datatables plugin) - php

Question

i have this page
and i have this modal
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:
with the values belonging to that row
how do i do that ? i've already searched for at least an hour and i couldn't find any reliable solutions
my html code is as follows:
#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>
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">×</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">×</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

Inside your editor button, put data target to target editor's modal. After that, we listen for show event of modal when it show/shown like following:
Html
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editAluno">
<span class="glyphicon glyphicon-plus"></span> Edit
</button>
Js
You can choose either show.bs.modal or shown.bs.modal, recommended just listen to show.bs.modal as you want to populate the data immediately after button clicked. Notice 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
});