The Blog

My Toughts

Using Datatable Easily In Laravel Using Yajra Datatable

Using Datatable Easily In Laravel Using Yajra Datatable

 

In your application sorting, searching and pagination functionality is common if you use simple table for display your application data in tabuler format so you should also write manualy code for it all functionality. and it is very painful and take some time.

But, if you use yajra datatable package in your laravel application then you can save this time. because yajra datatable jquery package provide all those functionality ready made nothing else write of single line for it.

First, we need to install yajra/laravel-datatables-oracle package in our laravel application run by following command in terminal.

composer require yajra/laravel-datatables-oracle

Next, configure installed package in application. so, open your config/app.php file and set insstalled package service providers and aliases.

'providers' => [
    ...,
    Yajra\DataTables\DataTablesServiceProvider::class,
]

'aliases' => [
    ...,
    'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]

After set providers and aliases then publish vendor run by following command.

php artisan vendor:publish --tag=datatables

Next, create Controller file in app/Http/Controllers folder

<?php

namespace App\Http\Controllers;

use App\Models\Attendance;
use Illuminate\Http\Request;
use Yajra\DataTables\DataTables;

class AttendanceController extends Controller
{
    public function getData()
    {
        $rows = Attendance::owned()->get();

        return Datatables::of($rows)
            ->editColumn('created_at', function ($row) {
                return $row->created_at->format('d M Y H:i:s');
            })
            ->editColumn('calendar_id', function ($row) {
                return optional($row->calendar)->date;
            })
            ->addColumn('action', function ($row) {
                $edit = '<a href="' . route('attendance.edit', $row->id) . '" class="btn btn-sm btn-primary"><i class="fa fa-pencil"></i> Edit</a>';
                $delete = '<a style="margin-left: 10px;" class="btn btn-sm btn-danger" data-href="' . route('attendance.destroy', $row->id) . '" data-toggle="modal" data-target="#confirm-delete-modal" data-original-title="Delete kost"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a>';

                return $edit . $delete;
            })
            ->addIndexColumn()->make(true);
    }
    
}

Next, create View file in resource/views/ folder

@extends('layouts.main')

@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/global/plugins/datatables/media/css/jquery.dataTables.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/global/plugins/datatables/media/css/jquery.dataTables_themeroller.css') }}">
@endsection

@section('content')
    <h3 class="page-title">
        Attendance
    </h3>
    <div class="page-bar">
        <ul class="page-breadcrumb">
            <li>
                <i class="fa fa-home"></i>
                <a href="{{ route('home') }}">Home</a>
                <i class="fa fa-angle-right"></i>
            </li>
            <li>
                <a href="#">Attendance</a>
            </li>
        </ul>
    </div>
<div class="row">
    <div class="col-md-12">
        <div class="portlet box blue">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-cogs"></i>Attendance
                </div>
                <div class="tools">
                    <a href="javascript:;" class="collapse"></a>
                    <a href="javascript:;" class="reload"></a>
                </div>
            </div>
            <div class="portlet-body">
                <div class="table-responsive">
                    @include('flash::message')
                    <table class="table table-bordered table-hover table-striped" cellspacing="0" id="datatable"></table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
    <script src="{{ asset('assets/global/plugins/datatables/media/js/jquery.dataTables.js') }}"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#datatable').dataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    method: 'POST',
                    url : '{{ route('master.attendance.getData') }}',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                },
                columns : [
                    {title: '#', data: 'DT_Row_Index', name: 'DT_Row_Index', defaultContent: '-', class: 'text-center'},
                    {title: 'Employee', data: 'employee_id', name: 'employee_id', defaultContent: '-', class: 'text-center'},
                    {title: 'Calendar Date', data: 'calendar_id', name: 'calendar_id', defaultContent: '-', class: 'text-center'},
                    {title: 'Start Working', data: 'start_working_time', name: 'start_working_time', defaultContent: '-', class: 'text-center'},
                    {title: 'End Working', data: 'end_working_time', name: 'end_working_time', defaultContent: '-', class: 'text-center'},
                    {title: 'Is Upload', data: 'is_upload', name: 'is_upload', defaultContent: '-', class: 'text-center'},
                    {title: 'Action', data: 'action', name: 'action', searchable: false, orderable: false, class: 'text-center'}
                ],
                responsive: true
            });

        });
    </script>
@endsection

And create a routes

Route::post('getAttendanceData', 'AttendanceController@getData')->name('master.attendance.getData');

Thanks it, im using in production so this example is real implementation. Cheers hope it helps.


- 3/4 -