Laravel 7 Datatables with Relationship Example

In this tutorial you will learn about the Laravel 7 Datatables with Relationship Example and its application with practical example.

In this Laravel dataTables with relationship example tutorial I’ll show you how to display and filter column in yajra dataTables with relationship.

Table Of Contents−

Laravel 7 Datatables with Relationship Example
Install Laravel 7/6

.env file
- Run Migration

Let suppose you have two database tables first is posts and the other one is users and you have relationship in each table. Now you want to display and filter posts title and who write these posts (author name). This would require you to use laravel yajra dataTables columns with a relationship.

In this tutorial I’ll demonstrates you to how to use a filter on dataTables columns with relationships.

Download Laravel Fresh App
Setup Database Configuration

Install Yajra DataTable
Create Migration and Modal
Create route

Generate Controller by Command
Create Blade File
Run Development Server

Install Laravel 7/6

First of all we need to create a fresh laravel project, download and install Laravel 7/6 using the below command

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

1	composer create-project --prefer-dist laravel/laravel larablog

Configure Database In .env file

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=larablog
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=larablog

DB_USERNAME=root

DB_PASSWORD=

Run Migration

Now, we need to create migration of tables using following command:

php artisan migrate

1	php artisan migrate

Install Yajra Datatable Package

In this step, we will install Yajra Datatables Package via the composer dependency manager. Use the following command to install Yajra Datatables Package.

composer require yajra/laravel-datatables-oracle

1	composer require yajra/laravel-datatables-oracle

After Installing Yajra Datatables package, we need to add service provider and alias in config/app.php file as following.

config/app.php

'providers' => [
      // Other service providers…
  Yajra\DataTables\DataTablesServiceProvider::class,
 ],

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

'providers' => [

// Other service providers…

Yajra\DataTables\DataTablesServiceProvider::class,

'aliases' => [

// Other aliases…

'Datatables' => Yajra\Datatables\Facades\Datatables::class,

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

php artisan vendor:publish

1	php artisan vendor:publish

Now let’s create post table migration and create Post Modal using following artisan command:

php artisan nake:modal Post -m

1	php artisan nake:modal Post -m

This will create migration, open migration file and put the following code in it:

database/migrations/YYY_MM_DD_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');
    }
}

<?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 run the following command

php artisan migrate

1	php artisan migrate

After you have to put bellow code in your Post model file for create posts table.Now you need to open app/Post.php model and create relationship in this model as following:

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');
    }
}

<?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');

}

Create route

Now, open your “routes/web.php” file and add the following route in it:

routes/web.php

Route::get('posts','PostController@index')->name('posts.index');

1	Route::get('posts','PostController@index')->name('posts.index');

Generate Controller by Command

Now, create a new controller PostController using following artisan command:

php artisan make:controller PostController

1	php artisan make:controller PostController

Once the above command executed, it will create a controller file PostController.php in app/Http/Controllers/directory. Open the PostController.php file and put the following code in it.

app/Http/Controllers/PostController.php

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
use App\Post;
use DataTables;
class PostController 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');
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\User;

use App\Post;

use DataTables;

class PostController 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');

}

Create Blade File

In this step, we will create view/blade file. Lets create a blade file “users.blade.php” in “resources/views/” directory and put the following code in it respectively.

resources/views/users.blade.php

<!DOCTYPE html>
<html>
<head>
<title>Laravel Datatables with Relationship Tutorial</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 Tutorial</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('posts.index') }}",
columns: [
{data: 'id', name: 'id'},
{data: 'title', name: 'title'},
{data: 'users', name: 'users.name'},
]
});
});
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel Datatables with Relationship Tutorial</title>

.paginate_button{

padding: 0px !important;

}

</style>

</head>

<body>

<div class="card-header bg-info text-white">Laravel Datatables with Relationship Tutorial</div>

@if (session('status'))

</div>

@endif

<thead>

<tr>

<th>Title</th>

<th>Auther</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

</div>

$(document).ready(function() {

$('.data-table').DataTable({

processing: true,

serverSide: true,

ajax: "{{ route('posts.index') }}",

columns: [

{data: 'id', name: 'id'},

{data: 'title', name: 'title'},

{data: 'users', name: 'users.name'},

]

});

</script>

</body>

</html>

Start Development Server

Let’s start the development server using following artisan command:

php artisan serve

1	php artisan serve

Now, visit the following link in browser to see the output:

http://localhost:8000/posts

1	http://localhost:8000/posts

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 7 Datatables with Relationship Example