In this article, we will see the laravel 8 yajra datatable example tutorial. Datatable provides users to many functionalities like a search button, export data, custom button, responsive table, search records, filter data, pagination, etc. Yajra datatable is one of the famous packages in laravel and PHP.
Datatables are basically jQuery plugins that allow you to add advanced interaction controls to your HTML tables data. Laravel yajra datatables also provide ajax for data searching and getting records. You install laravel datatable using the composer. Also, you can read more on the official document: yajra datatable.
So, let's see server side datatable in laravel 8 and how to use datatables in laravel 8.
Step 1: Create a New Project In Laravel 8
Step 2: Install Yajra Datatable Package
Step 3: Create Dummy Records Using Tinker
Step 4: Add New Route
Step 5: Create Controller For Yajra Datatable
Step 6: Create Blade File
Step 7: Run Laravel Application
In this step, we will create a new project set up for the laravel yajra datatable example.
composer create-project --prefer-dist laravel/laravel datatable_laravel_8
Now, run the following command in a project to get the latest version of the data table package.
composer require yajra/laravel-datatables-oracle
Note: This step is optional if you are using Laravel 5.5+
you need to add providers and alias in the project's config/app.php file
'providers' => [
...,
Yajra\DataTables\DataTablesServiceProvider::class,
]
'aliases' => [
...,
'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]
After adding aliases and providers. we will add some dummy records in the database using the below command.
php artisan tinker
factory(App\User::class, 200)->create();
In this step, we are creating a new route for a datatable example in the web.php file.
routes/web.php
Route::get('users', ['uses'=>'App\Http\Controllers\UserController@index', 'as'=>'users.index']);
After adding the route we need to create a controller to manage the layout and get data requests and return responses.
php artisan make:controller UserController
After this, we will add the below code in the UserController.php file.
app/Http/Controllers/UserController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
use DataTables;
class UserController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index(Request $request)
{
if ($request->ajax()) {
$data = User::latest()->get();
return Datatables::of($data)
->addIndexColumn()
->addColumn('action', function($row){
$btn = '<a href="javascript:void(0)" class="edit btn btn-primary btn-sm">View</a>';
return $btn;
})
->rawColumns(['action'])
->make(true);
}
return view('users');
}
}
Now, we will create the users.blade.php file for viewing.
resources/views/users.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel Datatables Example - websolutionstuff.com</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<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>
</head>
<body>
<div class="container">
<h1>Laravel Datatables Example </h1>
<table class="table table-bordered data-table">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Email</th>
<th width="100px">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
<script type="text/javascript">
$(function () {
var table = $('.data-table').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('users.index') }}",
columns: [
{data: 'DT_RowIndex', name: 'DT_RowIndex'},
{data: 'name', name: 'name'},
{data: 'email', name: 'email'},
{data: 'action', name: 'action', orderable: false, searchable: false},
]
});
});
</script>
</html>
Copy the below command and run it in the terminal.
php artisan serve
After that, open the below URL in the browser.
You might also like:
In this tutorial we will see how to generate QR code using javascript. we will implement QR code generator without...
Jul-19-2021
Converting DateTime into milliseconds in PHP can be useful for various applications, such as timestamping events or meas...
Mar-15-2024
Hello there! If you're diving into the world of programming on Ubuntu 22.04 and want to get your hands dirty with so...
Jan-15-2024
In this example, I will show you how to get the current user location in laravel, Many times we are required to find the...
Jun-10-2020