Yajra DataTables is a popular package for integrating the jQuery DataTables plugin with Laravel. It simplifies the process of adding server-side processing to DataTables in your Laravel applications. Here's how you can set up Yajra DataTables in Laravel 11:
1. Install Laravel:
Make sure you have Laravel installed. If not, you can create a new Laravel project using:
sh
composer create-project --prefer-dist laravel/laravel my-datatables-app
cd my-datatables-app
2. Install Yajra DataTables:
Add the Yajra DataTables package to your project using Composer:
sh
composer require yajra/laravel-datatables-oracle
3. Publish Configuration:
Publish the configuration file if you need to customize it:
sh
php artisan vendor:publish --tag=datatables
4. Create a Model and Migration:
For example, let's create a `User` model and migration:
sh
php artisan make:model User -m
Define the fields in the migration file and run the migration:
php
// database/migrations/xxxx_xx_xx_create_users_table.php
public function up()
{
Schema::create('users', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('email')->unique();
$table->timestamps();
});
}
sh
php artisan migrate
5. Create a Controller:
Generate a controller for handling the DataTables logic:
sh
php artisan make:controller UserController
In your `UserController`, add methods for displaying the view and handling the DataTables AJAX request:
php
namespace App\Http\Controllers;
use App\Models\User;
use Illuminate\Http\Request;
use Yajra\DataTables\Facades\DataTables;
class UserController extends Controller
{
public function index()
{
return view('users.index');
}
public function getUsers(Request $request)
{
if ($request->ajax()) {
$data = User::select('*');
return DataTables::of($data)
->addIndexColumn()
->addColumn('action', function($row){
$btn = '<a href="javascript:void(0)" class="edit btn btn-primary btn-sm">Edit</a>';
$btn .= ' <a href="javascript:void(0)" class="delete btn btn-danger btn-sm">Delete</a>';
return $btn;
})
->rawColumns(['action'])
->make(true);
}
}
}
6. Create a Route:
Define the routes for the controller actions:
php
use App\Http\Controllers\UserController;
Route::get('users', [UserController::class, 'index']);
Route::get('get-users', [UserController::class, 'getUsers'])->name('get.users');
7. Create a View:
Create a Blade view for displaying the DataTable:
html
<!-- resources/views/users/index.blade.php -->
<!DOCTYPE html>
<html>
<head>
<title>Laravel DataTables Tutorial</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
<div class="container">
<h1>Laravel DataTables Tutorial</h1>
<table class="table table-bordered" id="laravel_datatable">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
</table>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#laravel_datatable').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('get.users') }}",
columns: [
{data: 'id', name: 'id'},
{data: 'name', name: 'name'},
{data: 'email', name: 'email'},
{data: 'action', name: 'action', orderable: false, searchable: false},
]
});
});
</script>
</body>
</html>