PHP Laravel 6 DataTables Tutorial

Today, We want to share with you PHP Laravel 6 DataTables Tutorial.In this post we will show you laravel 5.5 datatables tutorial, hear for yajra datatables laravel package we will give you demo and example for implement.In this post, we will learn about yajra/laravel-datatables-html with an example.

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

PHP Laravel 6 DataTables Tutorial

There are the Following The simple About datatables server side processing in laravel using yajra, Full Information With Example and source code.

As I will cover this Post with live Working example to develop Datatable Server Side Processing with PHP Laravel 6, so the DataTables Server-side Processing with Laravel 6 and MySQL is used for this example is following below.

Step 1: Installing Laravel 6

Install and setup Laravel 6 Web Application

//Install and setup Laravel Project
composer create-project laravel/laravel worldwideweb --prefer-dist


//2.rename the file to .env (Configuration)
mv .env.example .env


//3.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=worldwideweb
DB_USERNAME=root
[email protected]

Laravel Datatable Pagination Sorting and Search server side processing

Step 2: Laravel 6 model and migration

create a language model and migration

php artisan make:model Language -m

#database/migrations/2022_09_11_895623_create_languages_table.php

public function up()
{
    Schema::create('languages', function (Blueprint $table) {
        $table->bigIncrements('id');
        $table->string('name');
        $table->string('slug');
        $table->timestamps();
    });
}

php artisan migrate

Step 3: Added Fake / dummy data

php artisan make:factory LanguageFactory

database/factories/LanguageFactory.php
<?php
use App\Language;
use Faker\Generator as Faker;

$factory->define(Language::class, function (Faker $faker) {
    return [
        'name' => $faker->sentence,
        'slug' => $faker->slug(6)
    ];
});

Step 4: Install Laravel 6 datatables

composer require yajra/laravel-datatables-oracle

config/app.php

'providers' => [
    ...
    Yajra\Datatables\DatatablesServiceProvider::class,
]

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

command to publish the config file

php artisan vendor:publish --provider="Yajra\DataTables\DataTablesServiceProvider"

Step 5: Setting up Blade File && view files

resources/views/layouts/master.blade.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel 6 Servser side DataTables Tutorial - tamilrokers</title>

        <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">

        <style>
            body {
                padding-top: 40px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            @yield('content')
        </div>

        <script src="//code.jquery.com/jquery.js"></script>
        <script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        @stack('scripts')
    </body>
</html>

run this command using terminal

php artisan make:controller WorldWideWebController

Step 6: Create a Laravel 6 Controller

app/Http/Controllers/WorldWideWebController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Yajra\Datatables\Datatables;
use App\Language;

class WorldWideWebController extends Controller
{
    public function index()
    {
        return view('index');
    }

    public function languageData()
    {
        return Datatables::of(Language::query())->make(true);
    }
}

resources/views/index.blade.php

@extends('layouts.master')

@section('content')
    <table class="table table-bordered" id="language-table">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Slug</th>
                <th>Created At</th>
                <th>Updated At</th>
            </tr>
        </thead>
    </table>
@stop
@push('scripts')
<script>
$(function() {
    $('#language-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{!! route('datatables.language') !!}',
        columns: [
            { data: 'id', name: 'id' },
            { data: 'name', name: 'name' },
            { data: 'slug', name: 'slug' },
            { data: 'created_at', name: 'created_at' },
            { data: 'updated_at', name: 'updated_at' }
        ]
    });
});
</script>
@endpush

Step 7: Laravel 6 Define a routes

routes/web.php

Route::get('language', '[email protected]');
Route::get('get-language-data', '[email protected]')->name('datatables.language')

Web Programming Tutorials Example with Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Server side DataTable in PHP Laravel 6,MySQL and Ajax.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1.   Eloquent ORM Soft Delete in Laravel 6
  2.   ng-keypress Event using Angular Example
  3.   jquery datetimepicker change Date format Dynamically
  4.   Laravel Datatable Pagination Sorting and Search server side processing
  5.   PHP AJAX Live Search Box Autocomplete Using MySQL Database
  6.   PHP MySQL ajax Autocomplete Live Search Box in jQuery
  7.   Custom Filter using Angular Example
  8.   Vue JS - Get Query String Value Example
  9.   Server-side processing Laravel DataTables
  10.   Laravel 5.7 Datatables Tutorial With Example

Leave a Reply

Your email address will not be published. Required fields are marked *