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

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 = '<a href="javascript:void(0)" class="edit btn btn-primary btn-sm">View</a>';

                    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) }} <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a></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>

                            <a href="{{Route('users_add')}}" class="btn btn-outline-success">Add user</a>

                            <a href="" id="user-edit" onclick="" class="btn btn-outline-primary" data-toggle="tooltip" data-placement="top" title="Choose 1 user to edit">Edit user</a>
                            <a href="" id="user-delete" onclick="return confirmation()" class="btn btn-outline-danger" data-toggle="tooltip" data-placement="top" title="Choose 1 user to delete">Delete user</a>


                        </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?

Naim886 · Answer 1 · 2020-12-09T20:39:45.597

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 = '<a href="javascript:void(0)" class="edit btn btn-primary btn-sm">View</a>';

                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') }}",

edited Dec 09 '20 at 20:39

answered Dec 09 '20 at 20:27

Naim886

17
9

It should have 2 routes insted 1? – wpcpremium80 Dec 09 '20 at 20:37
Yes. One is for loading page and another one is for loading data which will be ajax url – Naim886 Dec 09 '20 at 20:38
I've added another function, but it still doesn't show data :( When I work normally with builded @foreach and I return data to view from model it shows, but I've decided to add dynamic table... – wpcpremium80 Dec 09 '20 at 20:41
in this route /admin_panel/get_users_record do you get data? – Naim886 Dec 09 '20 at 20:43
Okey. Then put your controller code out side if. For testing purpose. In this route you will get json data that will load in view table – Naim886 Dec 09 '20 at 20:47
Yup. At route for get_users_record it shows json data. – wpcpremium80 Dec 09 '20 at 20:53
Unfortunately no. I can't solve it since yesterday. I've tried also to change position of webpacks in app.blade.php, put scripts in this view to @section('scripts') and still nothing. – wpcpremium80 Dec 10 '20 at 09:39
any idea? Maybe is other type of datatable? – wpcpremium80 Dec 10 '20 at 10:23

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

1 Answers1