Hello Dev’s
Today now in this article i will teach you how to use data table in laravel 8 project. Data table will provide searching, ordering and pagination automatically. Here we know Laravel 8 Yajra Datatable example.
It is given a quick response data because it’s used ajax and it’s layout very nice therefore user often by use.
Now, we can create yajra datatable by using below step in laravel 8.
Step 1: Install laravel 8 Project
By using bellow command used to we can install new Laravel 8 project
composer create-project --prefer-dist laravel/laravel blog
Step 2: configure this database in the .env file.
After that we can configure our database in .env file and change the database name, username, password in the .env file.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name(larave6_datatable)
DB_USERNAME=Enter_Your_Database_Username(root)
DB_PASSWORD=Enter_Your_Database_Password(root)Step 3: Database migration
Affterconfigure .env file after you can run this bellow command to migrate your databse.
php artisan migrate
Step 4: Insert dummy record
Now we will insert dummy record in “users” table by using laravel tinker command.
php artisan tinker factory(App\User::class, 100)->create();
Step 5: Install Yajra datatable package
Now, We will install new yajra package by using below command.
composer require yajra/laravel-datatables-oracle
Step 6: Add providers and aliases
We will add below providers and aliases in the “config/app.php” file.
'providers' => [ .... Yajra\Datatables\DatatablesServiceProvider::class, ], 'aliases' => [ .... 'Datatables' => 'Yajra\Datatables\Facades\Datatables', ]
Step 7: Create Controller
Now, we can create a controller file by using bellow command.
php artisan make:controller DataTableController --resource
Step 8: Add method in controller
Now, we can write this code in controller file.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
class DataTableController extends Controller
{
public function index()
{
return view('datatable.list');
}
public function get()
{
return datatables()->of(User::query())->make(true);
}
}Step 9: Add Route
Add route in your route file.
Route::get('datatable', 'DataTableController@index');
Route::get('get', 'DataTableController@get');Step 10: Create View File
Now, we will Create view file.
resources/views/datatable/list.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Laravel Datatable using Yajra Tutorial Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script>
$(function() {
$('#dataTable').DataTable({
processing: true,
serverSide: true,
ajax: '{{ url('get') }}',
columns: [
{ data: 'id', name: 'id' },
{ data: 'name', name: 'name' },
{ data: 'email', name: 'email' },
{ data: 'created_at', name: 'created_at' }
]
});
});
</script>
</head>
<body>
<div class="container">
<h2>Laravel Datatable using Yajra Tutorial Example</h2>
<table class="table table-bordered" id="dataTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Created</th>
</tr>
</thead>
</table>
</div>
</body>
</html>Read Also : How To disable button on click to prevent multiple form submits in jQuery?
Thanks for read. I hope it help you. For more you can follow us on facebook.
