Real Programmer
Datatables

Laravel 7 Datatables Yajra Datatables In Laravel

3 Mins Read
Pinterest LinkedIn Tumblr

Step 1: Install Laravel Project

I am going to install a laravel project using composer.

composer create-project --prefer-dist laravel/laravel laravel7datatables

Step 2: Going inside of project using the command

cd laravel7datatables

Step 3: Setup MySQL database

Now, configure this database in the .env file.

 DB_CONNECTION=mysql
 DB_HOST=127.0.0.1
 DB_PORT=3306
 DB_DATABASE=laravel7datatables
 DB_USERNAME=root
 [email protected]

I have done local database credentials.

Now migrate database 

 php artisan migrate

Step 4: Install yajra Package

We going to install the yajra/laravel-datatables-oracle package by writing the following command in cmd.

composer require yajra/laravel-datatables-oracle

Step 5: Now add providers and aliases inside of config/app.php

'providers' => [
         // …
         Yajra\DataTables\DataTablesServiceProvider::class,
     ]
'aliases' => [
         // …
         'Datatables' => Yajra\DataTables\Facades\DataTables::class,
     ]

Step 6: Generating dummy data
You can generate dummy data

php artisan tinker
factory(App\User::class, 50)->create();

Step 7: Create a controller and route

php artisan make:controller UsersDataController --resource

I going to register route in routes/web.php file.
//web.php

Route::get('show', 'UsersDataControl[email protected]');
 Route::get('index', '[email protected]');

Step 8: Check controller

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Datatables;
use App\User;

class UsersDataController extends Controller
{
    /**
     * 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');

    }

    /**
     * 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 9: Create a view file.

<html lang="en">
<head>
    <title>Laravel 7 DataTables Example: Real Programmer</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 7 DataTables Example: Real Programmer</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>

Next run below command for a quick run:

php artisan serve

Open URL in your browser: http://localhost:8000/show

Related Posts

Write A Comment