I am using the Yajra Datatables with server side rendering in a Laravel project. But I want to add some custom buttons to the columns that will have Vue #click functions. I am trying to add like this but the click it's not working.
->addColumn('action', function($user){
$btn = '<a #click="delete_user('.$user->id.')"><i class="fa fa-times font-20 deleteUser"></i></a>';
return $btn;
})
Have you tried v-on:click in code. Can you please show the vue js code.
I have had the same problem, I do not want to reboot to the ease of working with Yajra or to the power of Vue. I have fixed it by calling the function directly from the Vue instantiated object.
<button id="btn_entrada_edit" class="btn btn-sm dropdown-item text-primary" onclick="modal_edit_entrada.edit_entrada(' . $entrada->id . ')" ><i class="fas fa-edit"></i> Editar</button>
This is on my controller, other js functions like copying the passw and loging as user are working fine. The only thing not working is Vue click:
public function getBasicData()
{
$user=User::all();
return Datatables::of(User::query())
->addIndexColumn()
->addColumn('view_user', function($user){
$btn =
''.$user->name.'';
return $btn;
})
->addColumn('action', function($user){
if(Cache::has('user-is-online-' . $user->id))
$btn3='<i class="fa fa-circle font-16 onlineStatus online"></i>';
else $btn3 ='<i class="far fa-circle font-16 onlineStatus offline"></i>';
$btn1 = '<a v-on:click="delete_user('.$user->id.')"><i class="fa fa-times font-20 deleteUser"></i></a>';
$btn2 = '<i class="fa fa-user font-20"></i><input id="myInput'.$user->id.'" class="copyPassInput" value="'.$user->real_password.'"><i onclick="myFunction('.$user->id.')" title="'.$user->real_password.'" class="fa fa-eye font-20 copyPassIcon"></i>';
$btn4='<div class="d-flex">'.$btn2.' '.$btn1.' '.$btn3.'</div>';
return $btn4;
})
->rawColumns(['view_user','action'])
->make();
}
Related
I have some data shown in my datatable view, I want to add button to each data to open detail page which can show more detail information
public function Task(Request $request)
{
if ($request->ajax()) {
$data = DB::table('posts')
->where('jabatan', Auth::user()->jabatan)
->select('user_id', 'name', DB::raw('count(user_id) as total'))
->selectRaw('SUM(status = "Selesai") as selesai')
->selectRaw('count(user_id) - SUM(status = "Selesai") as belum')
->groupBy('name')
->groupBy('user_id')->get();
return Datatables::of($data)
->addColumn('action', function ($row) {
$btn = ' <span class="fas fa-eye"></span>';
return $btn;
})
->rawColumns(['action'])
->addIndexColumn()
->make(true);
}
return view('task.Task');
}
the button can appear in my datatable, but it will open %7B%7Broute('detail.index',$row->user_id)%7D%7D ,
If in a html table I can use <a class="btn btn-info btn-sm" href="{{ route('detail.index',$post->id) }}">Show</a>
how to make the button to open /detail in url? thanks in advance
as your in already in php so don't use {{ }} blade syntax use
$btn = '<span class="fas fa-eye"></span>';
I am using Yarja datatables for quite a complex table set and also have the ajax part returning two buttons:
{
$user = Auth::user();
$cl = $user->client_id;
$jb = DB::table('job')
->join('job_status', 'job.jobStatus_id', '=', 'job_status.id')
->join('customers', 'job.customer_id', '=', 'customers.id')
->join('users', 'job.operative_id', 'users.id')
->where('job.client_id', $cl)
->select(['job.id as id', 'job_status.status as status', 'job.customer_id as customer_id', 'customers.customer as customer', 'users.name as operative','job.address as address','job.postcode as postcode','job.slug as slug','job_status.id as jobStatusID'])
->get();
return Datatables::of($jb)
->addColumn('action', function($pubs){
$btn = '<div style="float:right">
<i class="fas fa-book" ></i><i class="fas fa-edit" ></i></div>';
return $btn;
})
->make(true);
}
This works fine but now I want to add an action to the buttons, initially the edit, which is the route and the id of the row.
As you can see I have replaced the # with the route so I have
"admin\jobView"
but I cannot seem to work out a way of adding a field from the query (specifically jb->id) so that the action would be something like
admin\jobView\123
Just can't seem to get it and would greatly appreciate some help!
$pubs should contain your job, so you should be able to use $pubs->id, to get the job id.
What I would do though is replace this giant string with a view so it becomes easier to maintain:
return Datatables::of($jb)
->addColumn('action', function($job) {
return (string)view('admin.jobs.action', compact('job'));
})
->rawColumns(['action'])
->make(true);
Create a view, admin/jobs/action.blade.php for example:
<div style="float:right">
<a href="{{ route('admin.jobview', $job->id) }}" class="btn btn-outline-secondary btn-xs" title="show details" style="margin-right:.5em;font-size:.75em">
<i class="fas fa-book"></i></a>
<a href="{{ route('admin.jobview', $job->id) }}" class="btn btn-outline-secondary btn-xs" title="show details" style="margin-right:.5em;font-size:.75em">
<i class="fas fa-edit"></i>
</a>
</div>
I have a table data , this table have function delete button .
this button is successfully delete but i need to add alert on-click confirmation to delete like this :
<a href="delete.php?id=<?=$row['id']; ?>"
onclick="return confirm('Anda yakin mau menghapus item ini ?')">[Hapus]</a>
but i using datatales serverside i dont know where i put this onclick
its my function delete
public function indexDataTables_pns()
{
$pns = Data_pns::with('users','master_golongan','master_jabatan')->get();
return Datatables::of($pns)->addIndexColumn()
->addColumn('Nama', function ($pns) {
return ''.$pns->users->nama.'';
})
->editColumn('edit', function ($pns) {
return '<i class="glyphicon glyphicon-edit"></i>';
})
->editColumn('hapus', function ($pns) {
// THIS START HERE FOR DELETE FUNCTION
$c = csrf_field();
$m = method_field('DELETE');
return "<form action='/delete/$pns->id' method='POST'>
$c
$m
<button style='margin-left:10px; width: 30px;' type='submit'
class='btn btn-xs btn-danger delete'>
<i class='glyphicon glyphicon-remove-circle'></i>
</button>
</form>";
})
->rawColumns(['Nama' => 'Nama','hapus' => 'hapus','action' => 'action','edit'=>'edit'])
->make(true);
}
where i can put this onclick and this message ?
you can use it on your delete form's button like
<button style='margin-left:10px; width: 30px;' type='submit'
class='btn btn-xs btn-danger delete' onclick='return confirm("Anda yakin mau
menghapus item ini ?")'>
<i class='glyphicon glyphicon-remove-circle'></i>
</button>
or add a class to your form and use confirmation before submitting the form
<form action='/delete/$pns->id' method='POST' class='delete-form'>
now add this script in your view file
<script>
$('.delete-form').submit(function(event){
if(!confirm('Anda yakin mau menghapus item ini ?')){
event.preventDefault();
}
});
</script>
i'm just starting to learn ajax laravel im just following a tutorial then it not working for me. thanks
my ajax looks like this:
$(document).ready(function(){
$('#courseTable').DataTable({
processing: true,
serverSide: true,
ajax: {
url: "{{{ route('courses.index') }}}",
},
then in routes:
Route::resource('courses', 'CourseController');
then for my coursecontroller:
public function index()
{
// $courses = Course::orderBy('description','asc')->paginate(8);
if (request()->ajax()) {
return datatables()->of(Course::latest()->get())
->addColumn('action', function($data){
$button = '<button type="button" name="edit" id="'.$data->courseID.'"
class="edit btn btn-warning btn-sm">Edit</button>';
$button .= ' ';
$button .= '<button type="button" name="delete" id="'.$data->courseID.'"
class="delete btn btn-warning btn-sm">Delete</button>';
return $button;
})
->rawColumns(['action'])
->make(true);
}
return view('registrar.courses.index');
// ->with('courses', $courses)
}
this error shows up like this:
app.js:16034 GET http://odrs.test/%7B%7B%7B%20route('courses.index')%20%7D%7D%7D?draw=1&colum 404 (Not Found)
it's impossible to write a blade template in a separate javascript file.
you have probably 2 ways to do it:
join your eventListener in your blade view as a child.
transfer your JS file to your views file, change its extension to blade.php and include it in the view between script tags:
<script>
#include("my-view-js")
</script>
I use yajra datatable but i've get problem when I use the method "addColumn".
the one I use that method is work properly, but the other doesn't
this is my source code :
->addColumn('action', function($arrProduct){
return
'<center><a class="btn btn-success btn-sm" href="'.route('packaging.edit',['id' => $arrProduct['id'], 'product_id'=> $arrProduct['product_id']]).'">
<i class="fa fa-refresh"></i> Proses</a></center>';
})
->addColumn('status', function($arrProduct){
if($arrProduct['status_produksi']){
return ucwords($arrProduct['status_produksi']);
}else{
$tag = "<center><a class='btn btn-danger btn-sm'>
<i class='fa fa-refresh'></i>Belum Diproses</a></center>";
return $tag;
}
})
->make(true);
and this is the problem :
one of them (column action) is work properly, but why in the other (column status) the "addColumn" doesn't work?
pls somebody help me.. thank's anyway
Add ->rawColumns(['status', 'action'])
before ->make(true);