Laravel Datatables with Relationship Example

Admin   Laravel   227  2021-03-16 00:50:06

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','[email protected]')->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...