Hello Devs,

In this tutorial, we are going to learn about laravel 7 datatables tutorial.

Follow this step by step guide given below:




Step 1 : 


Install Laravel 7 

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



Step 2 : 


Install Yajra Datatable

composer require yajra/laravel-datatables-oracle

config/app.php

.....
'providers' => [
	....
	Yajra\DataTables\DataTablesServiceProvider::class,
]
'aliases' => [
	....
	'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]
.....



Step 3 : 


Add Dummy Records 

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



Step 4 : 


Add Route routes/web.php

Route::get('users','UserController@index')->name('users.index');



Step 5 : 


Create Controller app/Http/Controllers/UserController.php

<?php

namespace App\Http\Controllers;

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

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('usersDataTables');
    }
}



Step 6 :


 Create View resources/views/usersDataTables.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 7 Datatables Example - Rathorji.in</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 class="bg-dark">
<div class="container">
  <div class="row">
      <div class="col-md-8 mt-3 offset-md-2">
          <div class="card">
              <div class="card-header">
                  <h5>Laravel 7 Datatables Example -Rathorji.in</h5>
              </div>
              <div class="card-body">
                  <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>
          </div>
      </div>
  </div>
</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>


Run this command:

php artisan serve

Open this URL:

http://localhost:8000/user


I hope this example helps you.