To implement datatables in Laravel, you can use the “yajra/laravel-datatables-oracle” package.
Laravel Datatables provides a quick search, pagination, ordering, and sorting in the table. The datatables are jQuery plugins that allow you to add advanced interaction controls to your HTML tables data which is very useful in UI/UX. Laravel Datatables also provide Ajax for data searching and filtering. It gives the functionalities like search, sort, and pagination on a table.
Here are the steps to implement of DataTables in Laravel:
Step 1: Install Laravel Project
composer create-project --prefer-dist laravel/laravel laraveldatatables
Step 2: Setup MySQL database
Configure this database in the .env file.
//.env DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laraveldatatables DB_USERNAME=root DB_PASSWORD=
I have set up local database credentials.
Next, migrate two tables provided by Laravel Move to your cmd and hit the following command.
php artisan migrate
It will place two tables in your database.
- users
- password_resets
Step 3: Install the yajra Package
We will install the yajra/laravel-datatables-oracle package by writing the following command in cmd.
composer require yajra/laravel-datatables-oracle
Step 4: Define providers and aliases.
Find the providers in config >> app.php file and register the DatatablesServiceProvider.
'providers' => [
// ...
Yajra\Datatables\DatatablesServiceProvider::class,
]
Place the aliases in config >> app.php file and register the aliases.
'aliases' => [
// ...
'Datatables' => Yajra\Datatables\Facades\Datatables::class,
]
Step 5: Generating dummy data
We need to generate some dummy records for this example. So follow the command.
php artisan tinker
factory(App\User::class, 100)->create();
Step 6: Create a controller and route
php artisan make:controller DisplayDataController --resource
It will create one controller file called DisplayDataController.php.
We register routes in routes >> web.php file. So let us do it.
//web.php
Route::get('create', 'DisplayDataController@create');
Route::get('index', 'DisplayDataController@index');
//DisplayDataController.php
use Datatables;
use App\User;
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
return Datatables::of(User::query())->make(true);
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
return view('displaydata');
}
Step 7: Create a view file.
Create a file in the resources >> views >> displaydata.blade.php and put the following code in it.
//displaydata.blade.php
<html lang="en">
<head>
<title>Laravel DataTables Tutorial Example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="container">
<h2>Laravel DataTables Tutorial Example</h2>
<table class="table table-bordered" id="table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
</table>
</div>
<script>
$(function() {
$('#table').DataTable({
processing: true,
serverSide: true,
ajax: '{{ url('index') }}',
columns: [
{ data: 'id', name: 'id' },
{ data: 'name', name: 'name' },
{ data: 'email', name: 'email' }
]
});
});
</script>
</body>
</html>
Here, what we have done i when the page is loaded, we send an AJAX request to the server and get the exact data we need to display on the table. In our case, it is id, name, and email.
It appends all the data to the #table id with searching, sorting, and pagination functionality.
Run the below command.
php artisan serve
Open the URL in your browser: http://localhost:8000/create
Possible Error:
DataTables warning: table id=table – Ajax error. For more information about this error, please see http://datatables.net/tn/7
Possible Solution:
Change Providers and aliases in config >> app.php file
Yajra\Datatables\DatatablesServiceProvider::class,
'Datatables' => Yajra\Datatables\Datatables::class,
to this
yajra\Datatables\DatatablesServiceProvider::class,
'Datatables' => yajra\Datatables\Datatables::class,
The screenshot below was captured when I searched the tables, and it works perfectly.
That’s it for Laravel Datatables.
Krunal Lathiya is a seasoned Computer Science expert with over eight years in the tech industry. He boasts deep knowledge in Data Science and Machine Learning. Versed in Python, JavaScript, PHP, R, and Golang. Skilled in frameworks like Angular and React and platforms such as Node.js. His expertise spans both front-end and back-end development. His proficiency in the Python language stands as a testament to his versatility and commitment to the craft.
hey krunal,
i did this tutorial but i got the above discussed error and i tried it by given solution but it doesn’t work…any other solution ??
thank you,
in DisplayDataController.php, add:
use dataTables;
use App\User;
and it works!
thanks
Thanks its working
i got an error:
DataTables warning: table id=table – Ajax error. For more information about this error, please see http://datatables.net/tn/7
help me
Did you see above, and try the steps?
Possible Error:
DataTables warning: table id=table – Ajax error. For more information about this error, please see http://datatables.net/tn/7
Possible Solution:
Change Providers and aliases in config >> app.php file
Yajra\Datatables\DatatablesServiceProvider::class,
‘Datatables’ => Yajra\Datatables\Datatables::class,
to this
yajra\Datatables\DatatablesServiceProvider::class,
‘Datatables’ => yajra\Datatables\Datatables::class,
Thank you so much
it’s works fine
Thank you.
hi sir i need to implement datatables in my project how can i handle
@Jhon
Verifica el orden de tus rutas, lo solucione de esta manera:
Route::get(‘grupos/getdata’, ‘GrupoController@getdata’)->name(‘grupos.getdata’); // 1st
Route::resource(‘grupos’, ‘GrupoController’); //Last
i cant get the datatables sir in my project please gave me a solution
How can we get the result of two tables by join in datatables?
How to add action button for laravel ? like edit delete or view ?
DataTables warning: table id=table – Ajax error. For more information about this error, please see http://datatables.net/tn/7
I change this:
yajra\Datatables\DatatablesServiceProvider::class,
‘Datatables’ => yajra\Datatables\Datatables::class,
Hi Sir how can use Eloquent Relations in yajra datatable
Nice Tuts. Where’s the next tutorial for edit and delete? Thank you.
thanks a lot…
Great tutorial as usual, Thanks for sharing it.
It Works. Thanks
Your welcome
Please help me yajra datatable using api
$data = DoctorSubCategory::with([‘doctorCategory’])->get();
// dd($data);
//— Integrating This Collection Into Datatables
return Datatables::of($data)
->addColumn(‘action’, function($data) {
return view(‘admin.doctor.action-doctor-subcategory’,compact(‘data’));
})
->toJson();