Laravel6 - How to implement yajra datatable using yajra/laravel-datatables-oracle
In this article, we will share with you how to implement yajra datatable in laravel application using yajra/laravel-datatables-oracle package. this package is providing easy to used datatable functionality and implement in your laravel application.
Yajra datatable provides us many useful features like searching, ordering, sorting, pagination, etc.. The stated goal of DataTables is "To enhance the accessibility of data in HTML tables". In order to achieve this we recognize that DataTables has two categories of users that interact with the interfaces the software has:
If you never used befor yajra datatable in your laravel application then don't worry just follow the step and easy to implement. after done all the step then you can see the following preview.
Preview
Step - 1 Install package
First, we need to install yajra/laravel-datatables-oracle package using run following command in your terminal. we need "yajra/laravel-datatables-oracle": "^6.0.*" version for laravel 6.
composer require "yajra/laravel-datatables-oracle": "^6.0.*"Step - 2 Set the Service Provider and Facade alias
After installing the package, open your Laravel config file located at config/app.php and add the following lines.
In the $providers array add the following service provider for this package.
'providers' => [
// ...
Yajra\Datatables\DatatablesServiceProvider::class,
],After completing the step above, use the following command to publish configuration & assets:
php artisan vendor:publish --tag=datatablesAfter running this command in your terminal then config/datatables.php file automatic created. you can change the default setting in this file.
Step - 3 Create route
After installing package and configure all the set up then next things is make following two route in routes/web.php file.
// Route resorce for users listing.
Route::resource('users', 'UserController');
// Route for get users for yajra post request.
Route::get('get-users', '[email protected]')->name('get-users');Step - 4 Create controller
After, done above two routes then we need to create UserController.php file help of following artisan command.
php artisan make:controller UserControllerAfter running this command your UserController.php file automatic created on app/Http/Controllers a folder. just open it and write the following code into that file.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
class UserController extends Controller
{
public function index()
{
return view('users-index');
}
public function getUsers(Request $request)
{
$data = User::all();
return \DataTables::of($data)
->addColumn('Actions', function($data) {
return '<a href='.\URL::route('users.edit', $data->id).' class="btn btn-success btn-sm">Edit</a>
<a href='.\URL::route('users.show', $data->id).' class="btn btn-info btn-sm">View</a>';
})
->addColumn('Status', function($data) {
if($data->is_active == '1'){
return '<label class="badge badge-success">Active</label>';
}else{
return '<label class="badge badge-danger">Inactive</label>';
}
})
->rawColumns(['Actions','Status'])
->make(true);
}
}Step - 5 Change in app layout file
Now we make some changes in your default layouts/app.blade.php file. make the following change in your file. just remove default app.js file and add jQuery CDN there and also ass two new section @yield('style') and @yield('script')
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
@yield('style')
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
HackTheStuff Demos
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
@guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
@if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</div>
</li>
@endguest
</ul>
</div>
</div>
</nav>
<main class="py-4">
@yield('content')
</main>
</div>
@yield('script')
</body>
</html>Step - 6 Create blade file
After done controller file then we create one laravel blade HTML file that listing users' data. Now we are creating one simple blade file in resources/views/users-index.blade.php file and here we are making a very simple HTML layout for users listing.
@extends('layouts.app')
@section('style')
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
@endsection
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-header">{{ __('Users Listing') }}</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered datatable">
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Status</th>
<th width="150" class="text-center">Action</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('script')
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script>
$(document).ready(function() {
$('.datatable').DataTable({
processing: true,
serverSide: true,
autoWidth: false,
pageLength: 5,
// scrollX: true,
"order": [[ 0, "desc" ]],
ajax: '{{ route('get-users') }}',
columns: [
{data: 'id', name: 'id'},
{data: 'first_name', name: 'first_name'},
{data: 'last_name', name: 'last_name'},
{data: 'email', name: 'email'},
{data: 'Status', name: 'Status'},
{data: 'Actions', name: 'Actions',orderable:false,serachable:false,sClass:'text-center'},
]
});
});
</script>
@endsectionConclusion
As you can see, yajra datatable is very easy to use in laravel application help of yajra/laravel-datatables-oracle package.
We hope these tutorials help everyone. if you have any issues or questions regarding yajra daatatable implementation so please comment below. Thanks..
Copyright 2023 HackTheStuff
