Example DataTables

controller.php

<?php

namespace App\Http\Controllers\Office\Employee;

use App\Http\Resources\Office\Employee\EmployeeCollection;
use App\Http\Resources\Office\Employee\Employee as EmployeeResource;
use App\Models\User\User as Employee;
use App\Http\Controllers\Controller;
use Yajra\DataTables\DataTables;
use Illuminate\Database\Eloquent\Collection;

final class ApiListingController extends Controller
{
    public function showAll()
    {
       // @see https://laravel.com/docs/5.6/eloquent-resources
        $collection = Collection::make(
            new EmployeeCollection(
                new EmployeeResource(
                    Employee::where('username', "<>", "admin")->get()
                )
            )
        );
        return DataTables::of($collection)->make(true);
    }
}

view.blade.php

@extends('adminlte::page')
@section('title', '3R&M - Employee Listing')
@section('content_header')
    <h1> Employee Listing </h1>
@endsection
@section('content')
<div class="row" id="app">
	<div class="col-md-3">
		<form method="POST" action="{{\route('human-resource.employee.create')}}">
			@csrf()
			<legend>Create New Employee:</legend>
	        @if ($errors->any())
	            <div class="alert alert-danger text-xs">
		            <ul>
		                @foreach ($errors->all() as $error)
		                    <li class="text-sm">{{ $error }}</li>
		                @endforeach
		            </ul>
		        </div>
	        @endif
	        <div class="md-form {{$errors->has('first_name') ? "has-error":''}}">
	            <input type="text" name="first_name" value="{{\old('first_name')}}" id="inputFirstName">
	            <label for="inputFirstName">Given Name: </label>
	        </div>            
	        <div class="md-form {{$errors->has('middle_name') ? "has-error":''}}">
	            <input type="text" name="middle_name" value="{{\old('middle_name')}}" id="inputMiddleName">
	            <label for="inputMiddleName">Middle Name: </label>
	        </div>            
	        <div class="md-form {{$errors->has('last_name') ? "has-error":''}}">
	            <input type="text" name="last_name" value="{{\old('last_name')}}" id="inputLastName">
	            <label for="inputLastName">Last Name: </label>
	        </div>            
            <div class="md-form {{$errors->has('store_id') ? "has-error":''}}">
                <select name="store_id" id="inputStoreId" class="form-control" style="padding: 0;">
                    <option value="" disabled {{empty(\old('store_id')) ? "selected" : ""}}>Select Branch:</option>
                    @if ($branches->isNotEmpty())
                        @foreach ($branches as $branch)
                            <option value="{{$branch->id}}" {{!empty(\old('store_id')) ? (\old('store_id') == $branch->id ? "selected" : "") : ""}}>{{$branch->name}}</option>
                        @endforeach
                    @endif
                </select>                
            </div>
            <div class="md-form {{$errors->has('role_id') ? "has-error":''}}">
                <select name="role_id" id="inputRoleId" class="form-control" style="padding: 0;">
                    <option value="" disabled {{empty(\old('role_id')) ? "selected" : ""}}>Select Role:</option>
                    @if ($roles->isNotEmpty())
                        @foreach ($roles as $role)
                            <option value="{{$role->id}}" {{!empty(\old('role_id')) ? (\old('brole_id') == $role->id ? "selected" : "") : ""}}>{{$role->name}}</option>
                        @endforeach
                    @endif
                </select>                
            </div>
			<div class="md-form ">
                <create-button></create-button>
	        </div>
		</form>
	</div>
    <div class="col-md-9">
        <div class="card bg-gray-light">
            <div class="row-fluid">
                <div class="box box-primary collapsed-box">
                    <div class="box-header">
                        <h3 class="box-title">Employee Summary</h3>
                    </div>                    
                </div>
            </div>
            <div class="container-fluid">
                <table id="employees-table" class="table table-responsive table-striped table-condensed table-hover">
                    <thead class="bg-purple-gradient">
                        <tr>
                            <th>Last Name</th>
                            <th>First Name</th>
                            <th>Username</th>
                            <th>Assigned Branch</th>
                            <th>Position</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
</div>
@endsection
@push('css')
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.16/b-1.5.1/b-html5-1.5.1/r-2.2.1/sc-1.4.3/datatables.min.css"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.2/css/mdb.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
@endpush
@push('js')
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.16/b-1.5.1/b-html5-1.5.1/r-2.2.1/sc-1.4.3/datatables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.material.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.2/js/mdb.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="{{ \asset('js/app.js') }}"></script>
<script>
$(function() {
    var table = $('#employees-table').DataTable({
        "dom": 'Bfrtip',
        "buttons": [
            'pageLength', 'excel', 'pdf'
        ],
        "lengthMenu": [[5, 10, 50, -1], [5, 10, 50, "All"]],
        "serverSide": true,
        "deferRender": true,
        "columns": [
            { "data": "last_name", "orderable": true, "searchable": true },
            { "data": "first_name", "orderable": false, "searchable": true },
            { "data": "username", "orderable": false, "searchable": false },
            { "data": "store", "orderable": false, "searchable": false },
            { "data": "role", "orderable": false, "searchable": false },
        ],
        "ajax": "{{\route('api.office.employee.listing.all')}}"
    });
    //click rows 
    $('#employees-table tbody').on('click', 'tr', function () {
        var data = table.row( this ).data();
        window.location.href = "employees/" + data['username'] +"/profile";
    });
});
</script>
@endpush