Skip to content

All topics  /  Laravel

Laravel Datatables with Relationship Example

Laravel ·

Teams applying “Laravel Datatables with Relationship Example” in a production project can use details on Monitask to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the official Laravel website and test it against the project’s actual database and runtime.

Hello Friends,

In this blog,I will show you datatable with eager eloquent relationship in laravel application..we will implement relationship through get data using datatable in laravel application.we will use relationship to get data in laravel.i would like to show you laravel datatables with relationship example.

If you need to use get data with relationship datatable in laravel app.

In this example, i will give you step by step explanation datatables with relationship example laravel application.

Step 1 : Install Laravel App

In First step, We need to get fresh laravel version application using bellow command. So Let's open terminal and run bellow command.

composer create-project --prefer-dist laravel/laravel blog

Step 2 : Setup Database Configuration

After successfully install laravel app thenafter configure databse setup. We will open ".env" file and change the database name, username and password in the env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password

Step 3 : Install Yajra Datatale

We need to install yajra datatable composer package for datatable, so you can install using following command:

composer require yajra/laravel-datatables-oracle

After that you need to set providers and alias.

config/app.php

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

Step 4 : Create Migration and Modal

In this blog, We will create post table migration and create Post Modal using bellow command:

php artisan nake:modal Post -m

database/migrations/2020_06_19_070104_create_posts_table.php

<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->integer('user_id');
            $table->string('title');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

Now we require to run migration be bellow command:

php artisan migrate

After you have to put bellow code in your Post model file for create posts table.

app/Post.php

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
use App\User;
class Post extends Model
{
    protected $fillable = ['title'];
    public function users()
    {
        return $this->belongsTo(User::class,'user_id','id');
    }
}

Step 5 : Create route

now, we need to add one route for user controller in laravel application. so open your "routes/web.php" file and add following route.

routes/web.php

Route::get('users','UserController@index')->name('users.index');

Step 6 : Create Controler

Here this step now we should create new controller as UserController. So run bellow command and create new controller.

php artisan make:controller UserController

After successfully run above command after add index method in this controller So, let's copy bellow code and put on UserController.php file.

app/http/controller/UserController.php

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
use App\Post;
use DataTables;
class UserController extends Controller
{
    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Contracts\Support\Renderable
     */
    public function index(Request $request)
    {
        if ($request->ajax()) {
            $model = Post::with('users');
                return DataTables::eloquent($model)
                ->addColumn('users', function (Post $post) {
                    return $post->users->name;
                })
                ->toJson();
        }
        return view('users');
    }
}

Step 7 : Create Blade File

In last step. In this step we have to create users blade file. So mainly we have to create users blade file in view directory. First file is create and second one is show file. So finally you have to create following file and put bellow code:

/resources/views/users.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Datatables with Relationship Example - NiceSnippets.com</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
    <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
    <style type="text/css">
        .paginate_button{
            padding: 0px !important;
        }
    </style>
</head>
<body>
<div class="container" style="margin-top: 100px;margin-bottom: 100px; ">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header bg-info text-white">Laravel Datatables with Relationship Example - NiceSnippets.com</div>
                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif
                     <table class="table table-bordered data-table">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Title</th>
                                <th>Auther</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
   $(document).ready(function() {
        $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('users.index') }}",
            columns: [
                {data: 'id', name: 'id'},
                {data: 'title', name: 'title'},
                {data: 'users', name: 'users.name'},
            ]
        });
    });
</script>
</body>
</html>

It will help you...

# Laravel 7

# Laravel

# Laravel 6