Laravel 8 DataTables | Install and Use Yajra Datatables Laravel 8
https://laratutorials.com/laravel-8-datatables-install-and-use-yajra-datatables-laravel-8/
Laravel 8 DataTables | Install and Use Yajra Datatables Laravel 8
Laravel 8 Yajra DataTables. In this post, i will share with you how to install and use yajra DataTables in laravel 8.
Yajra DataTables provides package for laravel. Which is used to searching, sorting, pagination on the table and display lists. And you can install it by this command composer require yajra/laravel-datatables-oracle in laravel app.
Laravel 8 DataTables Example
Step 1 – Installing Laravel 8 App
Step 2 – Configuring .evn file for Database
Step 3 – Installing Laravel Yajra DataTables
Step 4 – Run Migration
Step 5 – Add Dummy Record
Step 6 – Create Route,
Step 7 – Creating Datatables Controller
Step 8 – Create DataTable Blade View
Step 9 – Start Development Server
Step 1 – Installing Laravel 8 App
In step 1, open your terminal and navigate to your local web server directory using the following command:
Then install laravel 8 latest application using the following command:
Step 2 – Configuring .evn file for Database
In step 2, open your downloaded laravel 8 app into any text editor. Then find .env file and configure database detail like following:DB_CONNECTION=mysqlDB_HOST=127.0.0.1DB_PORT=3306DB_DATABASE=db nameDB_USERNAME=db user nameDB_PASSWORD=db password
Step 3 – Installing Laravel Yajra DataTables
In step 3, Navigate to your downloaded LaravelDataTables directory. And then install Yajra Datatables Packages in your laravel 8. Open terminal and run the following command:
config/app.php 'providers' => [ Yajra\Datatables\DatatablesServiceProvider::class,], 'aliases' => [ 'Datatables' => Yajra\Datatables\Facades\Datatables::class,]
Then publish laravel datatables vendor package by using the following command:
Step 4 – Run Migration
Now, open again your terminal and type the following command on cmd to create tables into your selected database:
Step 5 – Add Dummy Record
In step 5, Navigate to database/seeders/ directory and add the following code into it for add fake records into database table users:<?phpnamespace Database\Seeders;use Illuminate\Database\Seeder;use App\Models\User;class DatabaseSeeder extends Seeder{ /** * Seed the application's database. * * @return void */ public function run() { User::factory(200)->create(); }}
Then use the following command to seeds db:
Then will see this “Database seeding completed successfully.” on command prompt.
Step 6 – Create Route
In step 6, open your web.php file, which is located inside routes directory. Then add the following routes into web.php file:use App\Http\Controllers\DataTablesController;Route::get('yajra-datatables', [DataTablesController::class, 'index']);
Step 7 – Creating Datatables Controller
In step 7, create datatable controller by using the following command:
The above command will create DataTablesController.php file, which is located inside LaravelDataTables/app/Http/Controllers/ directory. So add the following code into it:<?phpnamespace App\Http\Controllers;use Illuminate\Http\Request;use App\Models\User;use Datatables;class DataTablesController extends Controller{ public function index(){ if(request()->ajax()) { return datatables()->of(User::select('*')) ->addIndexColumn() ->make(true); } return view('datatables'); }}
Step 8 – Create DataTable Blade View
In step 8, create new blade view file that named datatables.blade.php inside resources/views directory for display list using yajra datatables in laravel.
And add the following jQuery yajra datatbles libraries into datatables.blade.php: <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"> <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
Also add the following jQuery and ajax code into datatables.blade.php to get data from database table with pagination:<script type="text/javascript"> $(document).ready( function () { $('#datatables-example').DataTable({ processing: true, serverSide: true, ajax: "{{ url('yajra-datatables') }}", columns: [ { data: 'id', name: 'id' }, { data: 'name', name: 'name' }, { data: 'email', name: 'email' }, { data: 'created_at', name: 'created_at' } ] }); });</script>
Don’t worry i have already added the jquery datatables libraries and ajax code on datatables.blade.php.
So, add the following code into datatables.blade.php file:<!DOCTYPE html><html><head> <title>Laravel 8 DataTables Example</title> <meta name="csrf-token" content="{{ csrf_token() }}"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"> <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script></head><body><div class="container mt-4"> <div class="card"> <div class="card-header text-center font-weight-bold"> <h2>Laravel 8 DataTables Example Tutorial</h2> </div> <div class="card-body"> <table class="table table-bordered" id="datatables-example"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Email</th> <th>Created at</th> </tr> </thead> </table> </div> </div><script type="text/javascript"> $(document).ready( function () { $('#datatables-example').DataTable({ processing: true, serverSide: true, ajax: "{{ url('yajra-datatables') }}", columns: [ { data: 'id', name: 'id' }, { data: 'name', name: 'name' }, { data: 'email', name: 'email' }, { data: 'created_at', name: 'created_at' } ] }); });</script></div></body></html>
Step 9 – Start Development Server
In step 9, open your browser and fire the following url into your browser:
Last updated
