Yajra DataTables in Laravel 10; In this tutorial guide, i am going to show you how to install and use yajra DataTables in Laravel 10 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
Use the below given simple steps to install and use yajra dataTables in Laravel 10 apps:
- Step 1 – Installing Laravel 10 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 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 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 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