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" target="_blank" rel="nofollow" />
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" target="_blank" rel="nofollow" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" target="_blank" rel="nofollow" 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...
