Yajra DataTables in Laravel 10/9; In this tutorial guide, i am going to show you how to install and use yajra DataTables in Laravel 10/9 applications.
Yajra DataTables provides package for laravel. Which is used to searching, sorting, pagination on the table and display lists. And you can install it by this command composer require yajra/laravel-datatables-oracle in laravel app.
How to Use Yajra Datatables Server Side in Laravel 10/9
Use the below given simple steps to install and use yajra dataTables in Laravel 10/9 apps:
- Step 1 – Installing Laravel 10/9 App
- Step 2 – Configuring .evn file for Database
- Step 3 – Installing Laravel Yajra DataTables
- Step 4 – Run Migration
- Step 5 – Add Dummy Record
- Step 6 – Create Route,
- Step 7 – Creating Datatables Controller
- Step 8 – Create DataTable Blade View
- Step 9 – Start Development Server
Step 1 – Installing Laravel 10/9 App
In step 1, open your terminal and navigate to your local web server directory using the following command:
//for windows user cd xampp/htdocs //for ubuntu user cd var/www/html
Then install laravel latest application using the following command:
composer create-project --prefer-dist laravel/laravel LaravelDataTables
Step 2 – Configuring .evn file for Database
In step 2, open your downloaded laravel app into any text editor. Then find .env file and configure database detail like following:
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=db name DB_USERNAME=db user name DB_PASSWORD=db password
Step 3 – Installing Laravel Yajra DataTables
In step 3, Navigate to your downloaded LaravelDataTables directory. And then install Yajra Datatables Packages in your laravel. Open terminal and run the following command:
cd / LaravelDataTables composer require yajra/laravel-datatables-oracle
config/app.php 'providers' => [ Yajra\Datatables\DatatablesServiceProvider::class, ], 'aliases' => [ 'Datatables' => Yajra\Datatables\Facades\Datatables::class, ]
Then publish laravel datatables vendor package by using the following command:
php artisan vendor:publish
Step 4 – Run Migration
Now, open again your terminal and type the following command on cmd to create tables into your selected database:
php artisan migrate
Step 5 – Add Dummy Record
In step 5, Navigate to database/seeders/ directory and add the following code into it for add fake records into database table users:
<?php
namespace Database\Seeders;
use Illuminate\Database\Seeder;
use App\Models\User;
class DatabaseSeeder extends Seeder
{
/**
* Seed the application's database.
*
* @return void
*/
public function run()
{
User::factory(200)->create();
}
}
Then use the following command to seeds db:
php artisan db:seed
Then will see this “Database seeding completed successfully.” on command prompt.
Step 6 – Create Route
In step 6, open your web.php file, which is located inside routes directory. Then add the following routes into web.php file:
use App\Http\Controllers\DataTablesController;
Route::get('yajra-datatables', [DataTablesController::class, 'index']);
Step 7 – Creating Datatables Controller
In step 7, create datatable controller by using the following command:
php artisan make:controller DataTablesController
The above command will create DataTablesController.php file, which is located inside LaravelDataTables/app/Http/Controllers/ directory. So add the following code into it:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
use Datatables;
class DataTablesController extends Controller
{
public function index(){
if(request()->ajax()) {
return datatables()->of(User::select('*'))
->addIndexColumn()
->make(true);
}
return view('datatables');
}
}
Step 8 – Create DataTable Blade View
In step 8, create new blade view file that named datatables.blade.php inside resources/views directory for display list using yajra datatables in laravel.
And add the following jQuery yajra datatbles libraries into datatables.blade.php:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"> <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
Also add the following jQuery and ajax code into datatables.blade.php to get data from database table with pagination:
<script type="text/javascript">
$(document).ready( function () {
$('#datatables-example').DataTable({
processing: true,
serverSide: true,
ajax: "{{ url('yajra-datatables') }}",
columns: [
{ data: 'id', name: 'id' },
{ data: 'name', name: 'name' },
{ data: 'email', name: 'email' },
{ data: 'created_at', name: 'created_at' }
]
});
});
</script>
Don’t worry i have already added the jquery datatables libraries and ajax code on datatables.blade.php.
So, add the following code into datatables.blade.php file:
<!DOCTYPE html>
<html>
<head>
<title>Laravel 10/9 DataTables Example</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="container mt-4">
<div class="card">
<div class="card-header text-center font-weight-bold">
<h2>Laravel 10/9 DataTables Example Tutorial</h2>
</div>
<div class="card-body">
<table class="table table-bordered" id="datatables-example">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Created at</th>
</tr>
</thead>
</table>
</div>
</div>
<script type="text/javascript">
$(document).ready( function () {
$('#datatables-example').DataTable({
processing: true,
serverSide: true,
ajax: "{{ url('yajra-datatables') }}",
columns: [
{ data: 'id', name: 'id' },
{ data: 'name', name: 'name' },
{ data: 'email', name: 'email' },
{ data: 'created_at', name: 'created_at' }
]
});
});
</script>
</div>
</body>
</html>
Step 9 – Start Development Server
In step 9, open your browser and fire the following url into your browser:
http://127.0.0.1:8000/yajra-datatables
Be First to Comment