In this example, I will show you how to implement/install data tables in laravel. Datatables provides users with many functionalities like search buttons, custom buttons, responsive table, search records, filter data, pagination, etc, yajra datatable is one of the famous packages in laravel and PHP.
So, let's see laravel 6/7 datatables example, how to install datatables in laravel 6, the example of datatable in laravel 6/7, use datatables in laravel 7, yajra datatables laravel 6 crud example, laravel datatables server-side, laravel datatables AJAX
Datatables are basically jQuery plugins that allow you to add advanced interaction controls to your HTML tables data. Datatables also provide ajax for data searching and getting.
Step 1: Create new project in laravel 6/7
We are creating a new project set up for this example, So create a new project using the below command.
composer create-project --prefer-dist laravel/laravel demoStep 2 : Install Yajra Datatable Package
Run the following command in your project to get the latest version of the datatable package.
composer require yajra/laravel-datatables-oracleAfter 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,
]Step 3: Create Some Dummy Records Using Tinker
After adding aliases and providers are adding some dummy records in databse using the below command.
php artisan tinker
factory(App\User::class, 200)->create();Step 4: Create New Route
Now in this step, we are creating a new route for datatable example in this path Routes/web.php
Route::get('users', ['uses'=>'[email protected]', 'as'=>'users.index']);Step 5: Create Controller For Datatable
After adding the route we need to create a controller to manage the layout and get data requests and return responses, follow below command for creating controller
php artisan make:controller UserControllerAfter this, we need to add the 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');
}
}Step 6: Create Blade File
Now create the users.blade.php file for view in this path 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>Now, We are all completed our code, so it's time to run this project...
So, copy the below command and run it in the terminal.
php artisan serveand finally, you can run this project on your browser.
You might also like:
- Read Also: Laravel 8 Image Upload Example
- Read Also: How to Get Current URL in Laravel
- Read Also: Laravel Accessor and Mutator Example
- Read Also: How To Delete Multiple Records Using Checkbox In Laravel
