Laravel 8 Yajra Datatable Example Tutorial
Today I will show you laravel 8 yajra datatable example tutorial. Datatable provides user to many functionalities like search button, custom button, responsive table, search records, filter data, pagination etc. In this example we will see how to install / use datatable in laravel 6/7/8.
Also we are perform laravel 8 crud operation in datatable. laravel 8 datatables with server side. laravel-yajra datatable example.
Yajra datatable is one of the the famous package in laravel 6/7/8 and php. Datatables is basically jquery plugins that allows you to add advanced interaction controls to your HTML tables data. Datatables also provide ajax for data searching and getting.
So, let's start laravel 8 yajra datatable example tutorial.
We are creating new project setup for this example. So, create new project using below command.
composer create-project --prefer-dist laravel/laravel demo
Run the following command in your project to get the latest version of the datatable package.
composer require yajra/laravel-datatables-oracle
After that you need to add providers and alias in your project's config/app.php file
'providers' => [
...,
Yajra\DataTables\DataTablesServiceProvider::class,
]
'aliases' => [
...,
'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]
After adding aliases and providers are adding some dummy records in databse using below command.
php artisan tinker
factory(App\User::class, 100)->create();
Now in this step we are creating new route for datatable example in this path Routes/web.php
Route::get('users', ['uses'=>'App\Http\Controllers\UserController@index', 'as'=>'users.index']);
After adding route we need to create controller to manage layout and getting data request and return response, follow below command for create controller
php artisan make:controller UserController
After this we need to add below code in this path 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 create users.blade.php file for view in this path resources/views/users.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 8 Yajra Datatable Example Tutorial - Techsolutionstuff</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 8 Yajra Datatable Example Tutorial - Techsolutionstuff</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 below command and run in terminal.
php artisan serve
and finally you can run this project on your browser.
You might also like :
- Read Also : Laravel REST API CRUD Tutorial
- Read Also : Autotab To Next Input Field JQuery Example
- Read Also : How To Create Dynamic Line Chart In Laravel
- Read Also : How To Validate Upload File Type Using Javascript
