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=datatables

After 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', 'UserController@getUsers')->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 UserController

After 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>
@endsection

Conclusion

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..


Was this article helpful?

1 out of 1 person found this article helpful.

Leave a comment

OR

7 Comments

  • Image
    카지노사이트
    March 03, 2020 Reply

  • Image
    바카라사이트
    March 03, 2020 Reply

  • Image
    카지노사이트
    March 03, 2020 Reply

  • Image
    바카라사이트
    March 03, 2020 Reply

  • Image
    카지노사이트
    March 03, 2020 Reply

  • Image
    카지노사이트
    March 03, 2020 Reply

    Excellent beat ! I wish to apprentice while you amend your web site, how can i subscribe for a blog web site? The account helped me a acceptable deal. I had been a little bit acquainted of this your broadcast offered bright clear idea

  • Image
    sEvenbites
    October 26, 2019 Reply

    Howdy! I realize this is sort of off-topic but I needed to ask. Does running a well-established blog such as yours require a large amount of work? I am brand new to operating a blog but I do write in my journal everyday. I'd like to start a blog so I can easily share my experience and thoughts online. Please let me know if you have any suggestions or tips for brand new aspiring blog owners. Thankyou! http://www.se7enbites.com/