Using Datatables in Laravel - php

Question

Hello I'm using Datatables on my laravel App from https://datatables.yajrabox.com/eloquent/add-edit-remove-column
In my code, I've got the edit buttons under the Action column to serve as data toggles for a modal which holds a form.
Now I'm trying to populate the modal with data from the table row with the currently clicked edit button. What would be the best way to go about this. I've tried several ways to no avail, including trying to use jquery to get the values of the sibling elements and put them into respective input fields in the modal form. I've also tried calling a method in my controller to find the relevant user and return it to the view, before returning the markup for the edit button. All to no avail.below is my code, what would be the best way to go about this?
Kind regards
my view:
#extends('layouts.master')
<?php
echo $_GET['edit-2'];
?>
#section('content')
<table class="table table-bordered" id="users-table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Created At</th>
<th>Updated At</th>
<th>Action</th>
</tr>
</thead>
</table>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">New Student</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" method="POST" action="/createStudent">
{{ csrf_field() }}
<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
<label for="name" class="col-md-4 control-label">FullName</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control" name="name" value="" required autofocus> #if ($errors->has('name'))
<span class="help-block">
<strong>{{ $errors->first('name') }}</strong>
</span> #endif
</div>
</div>
<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
<label for="email" class="col-md-4 control-label">E-Mail Address</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}" required> #if ($errors->has('email'))
<span class="help-block">
<strong>{{ $errors->first('email') }}</strong>
</span> #endif
</div>
</div>
<div class="form-group{{ $errors->has('phone') ? ' has-error' : '' }}">
<label for="phone" class="col-md-4 control-label">Phone Number</label>
<div class="col-md-6">
<input id="phone" type="text" class="form-control" name="phone" required> #if ($errors->has('phone'))
<span class="help-block">
<strong>{{ $errors->first('phone') }}</strong>
</span> #endif
</div>
</div>
<div class="form-group">
<label for="DOB" class="col-md-4 control-label">Date of Birth</label>
<div class="col-md-6">
<input id="DOB" type="date" class="form-control" name="DOB" required>
</div>
</div>
<fieldset class="offset-4">
<div class="form-group">
<label class="col-xs-3 control-label">Gender</label>
<div class="col-xs-9">
<div class="radio">
<label>
<input id="inlineradio1" name="gender" value="male" type="radio">
Male</label>
</div>
<div class="radio">
<label>
<input id="inlineradio1" name="gender" value="female" type="radio">
Female</label>
</div>
</div>
</div>
</fieldset>
<div class="form-group{{ $errors->has('phone') ? ' has-error' : '' }}">
<label for="qualification" class="col-md-4 control-label">Qualification</label>
<div class="col-md-6">
<input id="qualification" type="text" class="form-control" name="qualification" required> #if ($errors->has('qualification'))
<span class="help-block">
<strong>{{ $errors->first('qualification') }}</strong>
</span> #endif
</div>
</div>
<div class="form-group{{ $errors->has('course') ? ' has-error' : '' }}">
<label for="Course" class="col-md-4 control-label">Course</label>
<div class="col-md-6">
<input id="course" type="text" class="form-control" name="course" required> #if ($errors->has('phone'))
<span class="help-block">
<strong>{{ $errors->first('course') }}</strong>
</span> #endif
</div>
</div>
<div class="form-group{{ $errors->has('amount') ? ' has-error' : '' }}">
<label for="amount" class="col-md-4 control-label">Amount Paid</label>
<div class="col-md-6">
<input id="amount" type="number" class="form-control" name="amount" required> #if ($errors->has('amount'))
<span class="help-block">
<strong>{{ $errors->first('amount') }}</strong>
</span> #endif
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<button type="submit" class="btn btn-primary">
Register
</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#stop #push('scripts')
<script>
$(function() {
$('#users-table').DataTable({
processing: true,
serverSide: true,
ajax: '{!! route('
datatables.data ') !!}',
columns: [{
data: 'id',
name: 'id'
},
{
data: 'name',
name: 'name'
},
{
data: 'email',
name: 'email'
},
{
data: 'created_at',
name: 'created_at'
},
{
data: 'updated_at',
name: 'updated_at'
},
{
data: 'action',
name: 'action',
orderable: false,
searchable: false
}
]
});
});
</script>
#endpush
my controller method:
public function getAddEditRemoveColumnData() {
$users = User::select(['id', 'name', 'email', 'password', 'created_at', 'updated_at']);
return Datatables:: of ($users) ->
addColumn('action', function($user) {
//DatatablesController::current_user($user);
//User::current_user($user->id);
return '<a href="#edit-'.$user - > id.
'" class="btn btn-xs btn-primary" data-toggle="modal" data-target="#myModal"><i class="glyphicon glyphicon-edit"></i> Edit</a>';
}) ->
editColumn('id', 'ID: {{$id}}') ->
removeColumn('password') ->
make(true);
}

Answer 1

add column for edit button in datatable
return Datatables::of($User)->addColumn('action', function ($User) {
return 'id.'" class="edit-modal btn btn-circle btn-xs btn-info" title="Edit">Edit
;
})->removeColumn("id")->make(true);
now call ajax by class name(edit-modal) and gat data with sent user-id in url from controller
$(document).on('click', '.edit-modal', function() {
$('#(your form-id)').show();
$.ajax({
type: 'get',
url: "{{ url('/user/') }}/"+$(this).data('id'),
dataType: 'json',
success: function(data) {
$('your-input').val(data.id);
$('your-2-input').val(data.name);
......
},
error: function(data){
}
});
$('#(your modal-id)').modal('show');
});

Answer 2

Based from this link: https://datatables.net/reference/api/row().index(), you can get the index of a row.
So for the function for your edit button, you need to pass the row index to it.
Upon clicking the edit button, you can now get the data using the index that was passed to the function, and set it to the values of the inputs on your form.
I wasn't able to try this myself, but I think it will work.
Read this also: https://github.com/yajra/laravel-datatables/issues/699 :)