Including an editing button in a Datatable - php

Question

I've been trying to do this for several days, but hope someone could just have a better idea than me, I'm trying include an edit button to my Datatable but since I'm calling the data using the method in my Controller, I am not able to find a way to make this button work
Here is my Datatable method:
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.jqueryui.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.datatables.net/scroller/2.0.2/css/scroller.jqueryui.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css">
<script src="//code.jquery.com/jquery-1.12.3.js"></script>
<script
src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<script src="/js/jquery.min.js" ></script>
<script src="/js/jquery-ui.js" ></script>
<script src="https:////cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/dataTables.jqueryui.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/scroller/2.0.2/js/dataTables.scroller.min.js"></script>
<meta name="csrf-token" content="{{ csrf_token() }}">
<style type="text/css">
.loader {
position:fixed;
opacity: 0.5;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('/images/double_ring.gif') 50% 50% no-repeat rgb(249, 249, 249, 249);
}
.table tr:hover { background-color: #eeeeee;}
.content { background-color:white; }
</style>
<div id="loader" class="loader" style="display:none;"></div>
<h3 id='dashboard_title_header'>Pending Proposals</h3>
<br/>
</br>
<table id="table_roster" class="display nowrap">
<thead>
<tr>
<th>Proposal Number</th>
<th>Proposal Type</th>
<th>Sponsor Code</th>
<th>Prime Sponsor Code</th>
<th>Sponsor Assigned Proposal Number</th>
<th>Department Code</th>
<th>Status</th>
<th>Submission Deadline Date</th>
<th>Project Start Date</th>
<th>Proposal Specialist</th>
<th>PI</th>
</tr>
</thead>
</table>
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
function format ( d ) {
return '<table id="table_child" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>IRG:</td>'+
'<td>'+d[11]+'</td>'+
'<td>IRG Date:</td>'+
'<td>'+d[12]+'</td>'+
'<td>Council Cycle:</td>'+
'<td>'+d[13]+'</td>'+
'<td>Score:</td>'+
'<td>'+d[14]+'</td>'+
'<td>Percentile:</td>'+
'<td>'+d[15]+'</td>'+
'<td>Assessment:</td>'+
'<td>'+d[16]+'</td>'+
'<td>'+
'<button class="edit-model btn btn-info">'+
'<span class="glyphicon glyphicon-edit"></span>'+
'Edit'+
'</button>'+
'</td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var table = $('#table_roster').DataTable({
"processing": true,
ajax: "/getproposals",
//paging: true,
//pageLenght: '10',
deferRender: true,
scrollX: true,
scrollY: 400,
scrollCollapse: true,
scroller: true,
dom: 'Bfrtip',
"columnDefs": [
{
className: "dt-body-center",
targets: -1,
defaultContent: ["<i class='glyphicon glyphicon-edit text-info editButton' aria-hidden='true'></i>"]
}
]
});
$('#table_roster tbody').on('click', 'tr', function () {
var datas = table.row( this ).data();
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
//EditProposal(data[0]);
});
$(document).on('click', '.edit-model', function() {
$('#footer_action_button').text(" Update");
$('#footer_action_button').addClass('glyphicon-check');
$('#footer_action_button').removeClass('glyphicon-trash');
$('.actionBtn').addClass('btn-success');
$('.actionBtn').removeClass('btn-danger');
$('.actionBtn').removeClass('delete');
$('.actionBtn').addClass('edit');
$('.modal-title').text('Edit');
$('.deleteContent').hide();
$('.form-horizontal').show();
var stuff = $(this).data('info').split(',');
fillmodalData(stuff)
$('#myModal').modal('show');
});
});
function EditProposal(id) {
window.open("/proposals/" + id);
}
</script>
And this is my method in the Controller
public function getProposals()
{
$sql = "SELECT proposal_number, proposal_type, sponsor_code, prime_sponsor_code, sponsor_assigned_proposal_number, award_admin_dept_code, status, submission_deadline_date, project_start_date, proposal_specialist, lname, IRG, IRGDate, CouncilCycleNumber, ScoreNumber, PercentageNumber, AssessmentEntry FROM proposal LEFT JOIN pendingproposals USING(proposal_id) LEFT JOIN proposal_research_team USING(proposal_id) WHERE proposal.status in ('Unsubmitted','Dept Approval In Process', 'Admin Office In Process', 'JIT Request Received', 'JIT Submitted', 'Submitted to Sponsor', 'Sub 1/4: Awaiting Agreement', 'Sub 2/4: Under Negotiation', 'Sub 3/4: Partially Executed') AND role = 'Lead Principal Investigator';";
$results = \DB::connection('mysql2')->select( \DB::raw($sql) );
$data = array();
$i = 0;
foreach ($results as $r) {
$data[$i] = array($r->proposal_number, $r->proposal_type, $r->sponsor_code, $r->prime_sponsor_code, $r->sponsor_assigned_proposal_number, $r->award_admin_dept_code, $r->status, $r->submission_deadline_date, $r->project_start_date, $r->proposal_specialist, $r->lname, $r->IRG, $r->IRGDate, $r->CouncilCycleNumber, $r->ScoreNumber, $r->PercentageNumber, $r->AssessmentEntry);
$i++;
}
$results2 = ["sEcho" => 1,
"iTotalRecords" => count($data),
"iTotalDisplayRecords" => count($data),
"aaData" => $data];
return json_encode($results2);
}
I appreciate your help :)