Serverside datatables with Yajra in laravel yajra/laravel-datatables

instructions.php

Listing items in tables is one of the ,ost essential while building dashboards. Datatables https://datatables.net/ Add advanced interaction controls
to your HTML tables which we mostly do on the client side. Using the same approach to load large rows of data from the database
always becomes slow as the data grows bigger and bigger untl at some point the datatable break. This is a major reason to 
consider using datatables from the start of your development to avoid such. Thats what we are goint to do.
Create a new laravel project composer create-project --prefer-dist laravel/laravel datatable-test
change the .env for database connections
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=datatables-test
DB_USERNAME=root
DB_PASSWORD=
if you're using Maria DB, put thisin your boot() function in AppServiceProvider.php
use Illuminate\Support\Facades\Schema;
Schema::defaultStringLength(191);

 run auth scaffold, we're going to use the logged account
 php artisan make:auth
 
php make:model Post --all
this creates a Model Post, migration, PostController resource and PostFactory in database/factory

create_posts_table migration in database/migrations, use the below up() function


public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->text('body');
            $table->string('category');
            $table->unsignedInteger('user_id');
            $table->boolean('status')->default(0);
            $table->timestamps();
        });
    }
    
  php artisan migrate to run our migration
  go to database/factory/PostFactory and replace with the following
  
<?php

use Faker\Generator as Faker;

$factory->define(App\Post::class, function (Faker $faker) {
    return [
        'title'=> $faker->sentence,
        'body'=> $faker->paragraph,
        'category'=> $faker->city,
        'status'=> $faker->boolean,
        'user_id'=> $faker->numberBetween(1,10),
    ];
});

UserFactory is already set.
Go to DatabasTableseSeeder.php and update the following code

public function run()
    {
        factory(\App\User::class,10)->create();
        factory(\App\Post::class,60)->create();
    }
    
Run the seeder
  php artisan db:seed
  Our Users table and Posts table has data now,
  
  Now lets update our Model relations, User has Many posts, Post belongs to a User
  so in App\User.php add this function
  public function post(){
        return $this->hasMany(Post::class);
    }
   
In Posts.php model add the function
public function user(){
        return $this->belongsTo(User::class);
    }

we can now finally display our data.
install the Yajta Databale plugin. For more info https://yajrabox.com/docs/laravel-datatables/master/installation
composer require yajra/laravel-datatables-oracle:^8.0
the publish vendor config file
php artisan vendor:publish --tag=datatables

add the following to your Css in layouts/app.blade.php in recourses
<link href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css">

and the below to your JS, remember to remove the js/app.js as it interferes with our dtatables js, you can figure out on it later
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
<!-- Scripts -->
{{--<script src="{{ asset('js/app.js') }}" defer></script>--}}
    @yield('js')
    
    
in routes/web.php lets register our Post resource 
Route::resource('post','PostController'); this gives us all the recource routes

in PostController.php in index() function add the following

public function index(Request $request)
    {
        if ($request->ajax()) {
            return Datatables::of(Post::with('user')->get())
                ->addColumn('author', function (Post $post){
                    return  ucwords($post->user->name);
                })
                ->editColumn('status', function (Post $post){
                    if ($post->status==true) {
                        return '<span class="label label-success ">Active</span>';
                    }else{
                        return '<span class="label label-danger">Inactive</span>';
                    }
                })
                ->editColumn('body', function (Post $post){
                    if (strlen(strip_tags($post->body))>50){
                        $dot = '...';
                    }else{
                        $dot = '';
                    }
                    return substr( strip_tags($post->body), 0,50).$dot;
                })
                ->addColumn('actions', function (Post $post){
                    return  '<a href="'.route("post.show",$post->id).'" class="btn btn-primary btn-xs" >Student Transactions</a>';
                })
                ->editColumn('created_at', function(Post $post) {
                    return '<td>'. \Carbon\Carbon::parse($post->created_at)->format('M j, Y') .'</td>
                                <td>';
                })
                ->addIndexColumn()
                ->rawColumns(['created_at','actions','status'])
                ->make(true);
        }
        return view('posts');
    }
    
    remeberto include used classes
use Carbon\Carbon;
use Yajra\Datatables\Datatables;

Finally, lets create our view in resources/view
posts.blade.php
@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">Post</div>

                    <div class="card-body">
                        <table class="table table-bordered table-striped printable" id="datatable">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>Title</th>
                                <th>Body</th>
                                <th>Author</th>
                                <th>Category</th>
                                <th>Status</th>
                                <th>Created On</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script type="text/javascript">
        $('#datatable').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": '{!! route('post.index') !!}',
            "columns": [
                {data: 'DT_Row_Index', orderable: false, searchable: false},
                { data: 'title', name: 'title' },
                { data: 'body', name: 'body' },
                { data: 'category', name: 'category' },
                { data: 'author', name: 'author' },
                { data: 'status', name: 'status' },
                { data: 'created_at', name: 'created_at' },
                { data: 'actions', name: 'actions' }
            ]
        });
    </script>

    @endsection
We finally have our serverside datatables.