How to add Laravel datatable(yajra) to existing project? - php

Question

Is any possible way, to add yajra datatables to existing project?
If I implement it to blank view.blade.php it works good, but if I put it to my existing project it only show thead.
My controller:
namespace App\Http\Controllers;
use App\Models\User;
use Illuminate\Http\Request;
use Yajra\DataTables\DataTables;
class UserRecordController extends Controller
{
public function __construct()
{
$this->middleware(['role:admin']);
}
public function show()
{
$data = User::all()->all();
return view('management.admin-only.users.users_record')->with('data', $data);
}
public function index(Request $request)
{
if ($request->ajax()) {
$data = User::all()->all();
return Datatables::of($data)
->addIndexColumn()
->addColumn('action', function($row){
$btn = 'View';
return $btn;
})
->rawColumns(['action'])
->make(true);
}
return view('management.admin-only.users.users_record');
}
}
My view:
#extends('layouts.app')
#section('content')
<div class="row admin-panel">
#include('management.common.admin_sidebar')
<div class="col" id="main">
<div class="card panel-stats">
<div class="card-body">
<div class="flash-message">
#foreach (['danger', 'warning', 'success', 'info'] as $msg)
#if(Session::has('alert-' . $msg))
<p class="alert alert-{{ $msg }}">{{ Session::get('alert-' . $msg) }} ×</p>
#endif
#endforeach
</div>
<div class="card-title">
<div class="card-body">
<div class="card-body">
<h2><img class="py-2 mr-3" height="100px" width="auto" src="{{ asset('img/admin/group.jpg') }}">Users</h2>
</div>
Add user
Edit user
Delete user
</div>
<div class="card-body">
<div class="card">
<table class="table table-responsive-md table-striped table-hover data-table" id="users-table">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>E-mail</th>
<th>Add date</th>
<th>Option</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
var table = $('.data-table').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('users_record') }}",
columns: [
{data: 'id', name: 'id'},
{data: 'firstname', name: 'firstname'},
{data: 'surname', name: 'surname'},
{data: 'email', name: 'email'},
{data: 'created_at', name: 'created_at'},
{data: 'action', name: 'action', orderable: false, searchable: false},
]
});
});
function changeUrl(el){
let urlEdit = '{{Route("users_edit_form", ":id" )}}';
urlEdit = urlEdit.replace(':id', el.value);
let urlDelete = '{{Route("users_delete_form", ":id" )}}';
urlDelete = urlDelete.replace(':id', el.value);
document.getElementById('user-edit').href = urlEdit;
document.getElementById('user-delete').href = urlDelete;
}
function checkIfChecked(){
if(document.getElementById('id-selected').checked)
{
console.log(document.getElementById('id-selected').value);
return true
}
else
{
console.log(document.getElementById('id-selected').value);
alert('Choose user to edit/delete!');
return false
}
}
function confirmation(){
let message = confirm("Are you sure?");
if(message)
return true;
else
return false;
}
</script>
#endsection
My routes:
Route::get('/admin_panel/users_record','UserRecordController#index')->name('users_record');
I worked with multiple tutorials - every looked similar. I've just imported all the neccessary webpacks to app.blade.php.
What I've done wrong?

Answer 1

you need two function, one is for load view like
public function index(){
return view('management.admin-only.users.users_record');
}
and another function to get data like
public function get_users_record(Request $request){
if ($request->ajax()) {
$data = User::all()->all();
return Datatables::of($data)
->addIndexColumn()
->addColumn('action', function($row){
$btn = 'View';
return $btn;
})
->rawColumns(['action'])
->make(true);
}
}
route will be
Route::get('/admin_panel/users_record','UserRecordController#index')->name('users_record');
Route::get('/admin_panel/get_users_record','UserRecordController#get_users_record')->name('get_users_record');
and ajax url should be
ajax: "{{ route('get_users_record') }}",