How to use yajra datatable in laravel 5.8
Today, We will discuss about how to use yajra datatable in laravel 5.8. We can easily searching, pagination, and ordering the data using this detestable.
yajra datatable is an oracle package and it provides facility like as sorting, searching, pagination and ordering. it is given a quick response data because it’s used ajax and it’s layout very nice therefore user often use.
Now, We will create yajra datatable using below step in laravel 5.8.
Step 1: Install laravel
Install the laravel using the below command.
1 | composer create-project --prefer-dist laravel/laravel laravel58_datatable 5.8 |
Step 2: Now, configure this database in the .env file.
After complete installation of laravel. we have to database configuration. now we will open the .env file and change the database name, username, password in the .env file. See below changes in a .env file.
1 2 3 4 5 6 | DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=Enter_Your_Database_Name(larave58_datatable) DB_USERNAME=Enter_Your_Database_Username(root) DB_PASSWORD=Enter_Your_Database_Password(root) |
Step 3: The Database Migration
Create The table using the below command.
1 | php artisan migrate |
Step 4: Create Dummy Record Data
Now we will add a dummy record in the ‘users’ table using the laravel tinker command.
1 2 3 | php artisan tinker factory(App\User::class, 100)->create(); |
Step 5: Install yajra Package
Now, We will install yajra package using below command.
1 | composer require yajra/laravel-datatables-oracle |
Step 6: Add providers and aliases
We will add below providers and aliases in the “config/app.php” file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 'providers' => [ .... Yajra\Datatables\DatatablesServiceProvider::class, ], 'aliases' => [ .... 'Datatables' => 'Yajra\Datatables\Facades\Datatables', ] |
Step 7: Create Controller
Now, We will create the controller using the below command and paste below code in this controller.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | php artisan make:controller DataTableController --resource <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use Datatables; use App\User; class DataTableController extends Controller { /** * Display a listing of the resource. * * @return \Illuminate\Http\Response */ public function index() { return view('datatable.list'); } public function fetch() { return Datatables::of(User::query())->make(true); } /** * Show the form for creating a new resource. * * @return \Illuminate\Http\Response */ public function create() { // } /** * Store a newly created resource in storage. * * @param \Illuminate\Http\Request $request * @return \Illuminate\Http\Response */ public function store(Request $request) { // } /** * Display the specified resource. * * @param int $id * @return \Illuminate\Http\Response */ public function show($id) { // } /** * Show the form for editing the specified resource. * * @param int $id * @return \Illuminate\Http\Response */ public function edit($id) { // } /** * Update the specified resource in storage. * * @param \Illuminate\Http\Request $request * @param int $id * @return \Illuminate\Http\Response */ public function update(Request $request, $id) { // } /** * Remove the specified resource from storage. * * @param int $id * @return \Illuminate\Http\Response */ public function destroy($id) { // } } |
Step 8: Create Route
Add the below following route code in the “routes/web.php” file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <?php /* |-------------------------------------------------------------------------- | Web Routes |-------------------------------------------------------------------------- | | Here is where you can register web routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | contains the "web" middleware group. Now create something great! | */ Route::get('/', function () { return view('welcome'); }); Route::get('datatable', 'DataTableController@index'); Route::get('fetch', 'DataTableController@fetch'); ?> |
Step 9: Create a view file.
Finally, We will create list.blade.php file in the “resources/views/datatable/” folder directory and paste below code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!DOCTYPE html> <html lang="en"> <head> <title>Laravel Datatable using Yajra Tutorial Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script> $(function() { $('#dataTable').DataTable({ processing: true, serverSide: true, ajax: '{{ url('fetch') }}', columns: [ { data: 'id', name: 'id' }, { data: 'name', name: 'name' }, { data: 'email', name: 'email' }, { data: 'created_at', name: 'created_at' } ] }); }); </script> </head> <body> <div class="container"> <h2>Laravel Datatable using Yajra Tutorial Example</h2> <table class="table table-bordered" id="dataTable"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Email</th> <th>Created</th> </tr> </thead> </table> </div> </body> </html> |
Now, We can run this example using below command.
1 | php artisan serve |
