Laravel Datatable Example Tutorial
Today we will see laravel datatable example tutorial. as we know datatables provides users to many functionalities like earch records, filter data, pagination, search button, custom button, responsive table etc yajra datatable is one of the the famous package in laravel 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 and see how to implement datatable in laravel.
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 below command in your project to get the new 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,
]
here we are adding some dummy records in databse using below command.
php artisan tinker
factory(App\User::class, 200)->create();
Now in this step we are creating new route for datatable example in this path Routes/web.php
Route::get('users', ['uses'=>'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 UserControllerAfter 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');
}
}
Step 6: Create Blade File
Now create users.blade.php file for view in this path resources/views/users.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel Datatables Example Tutorial- techsolutionstuff.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 all completed with our code So, it's time to run this project..
