Laravel 11 Yajra Datatables Example

Today, We will discuss about how to use yajra datatable in laravel 11. We can easily searching, pagination, and ordering the data using this datatable.

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 11.

Now, we follow the below step for creating the Laravel 11 Yajra Datatables Example.

Overview

Step 1: Install Laravel 11
Step 2: MySQL Database Configuration
Step 3: Create Migration Table
Step 4: Install Yajra Datatable
Step 5: Add Dummy Data
Step 6: Create Route
Step 7: Create Controller and Model
Step 8: Add Blade Files
Step 9: Run Laravel Application

Step 1 : Install Laravel 11

We are going to install laravel 11, so first open the command prompt or terminal and go to xampp htdocs folder directory using the command prompt. after then run the below command.

composer create-project laravel/laravel:^11.0 laravel_11_example

1	composer create-project laravel/laravel:^11.0 laravel_11_example

Step 2: MySQL Database Configuration

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.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_11_example
DB_USERNAME=root
DB_PASSWORD=
DB_COLLATION=utf8mb4_unicode_ci

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=laravel_11_example

DB_USERNAME=root

DB_PASSWORD=

DB_COLLATION=utf8mb4_unicode_ci

Step 3: Create Migration Table

Now, We need to create a migration. so we will below command using create the students table migration.

php artisan make:migration create_students_table --create=students

1	php artisan make:migration create_students_table --create=students

After complete migration. we need below changes in the database/migrations/create_students_table file.

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('students', function (Blueprint $table) {
            $table->id();
			$table->string('first_name');
            $table->string('last_name');
            $table->text('address');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('students');
    }
};
?>

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

return new class extends Migration

{

/**

* Run the migrations.

public function up(): void

{

Schema::create('students', function (Blueprint $table) {

$table->id();

$table->string('first_name');

$table->string('last_name');

$table->text('address');

$table->timestamps();

});

}

/**

* Reverse the migrations.

public function down(): void

{

Schema::dropIfExists('students');

}

};

Run the below command. after the changes above file.

php artisan migrate

1	php artisan migrate

Step 4: Install Yajra Datatable
In this step, we will intall yajra datatable using the below command.

composer require yajra/laravel-datatables

1	composer require yajra/laravel-datatables

Step 5: Add Dummy Data
In this step, we will add dummy data into database using the below commmand.

Student::factory()->count(40)->create()

1	Student::factory()->count(40)->create()

Step 6: Create Route

We have to need put below route in routes/web.php file.

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\StudentController;
Route::get('/', function () {
    return view('welcome');
});
Route::resource('students', StudentController::class);
?>

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\StudentController;

Route::get('/', function () {

return view('welcome');

});

Route::resource('students', StudentController::class);

Step 7: Create Model and Controller

Here below command help to create the controller and model.

php artisan make:controller StudentController --resource --model=Student

1	php artisan make:controller StudentController --resource --model=Student

Student.php

<?php

namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Student extends Model
{
    use HasFactory;
    protected $fillable = [
        'first_name','last_name', 'address'
    ];
}
?>

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Student extends Model

{

use HasFactory;

protected $fillable = [

'first_name','last_name', 'address'

];

}

StudentController.php

<?php

namespace App\Http\Controllers;

use App\Models\Student;
use Illuminate\Http\Request;
use DataTables;
use Illuminate\Http\JsonResponse;
class StudentController extends Controller
{
    /**
     * Display a listing of the resource.
	 * @return \Illuminate\Http\Response
     */
    public function index(Request $request)
    {
        if ($request->ajax()) {
    
            $data = Student::query();
    
            return Datatables::of($data)
			->addIndexColumn()
			->addColumn('action', function($row){

				$btn = '<a href="javascript:void(0)" data-toggle="tooltip"  data-id="'.$row->id.'" data-original-title="View" class="me-1 btn btn-info btn-sm showStudent"><i class="fa-regular fa-eye"></i> View</a>';
				return $btn;
			})
			->rawColumns(['action'])
			->make(true);
        }
          
        return view('students');
    }
}
?>

<?php

namespace App\Http\Controllers;

use App\Models\Student;

use Illuminate\Http\Request;

use DataTables;

use Illuminate\Http\JsonResponse;

class StudentController extends Controller

{

/**

* Display a listing of the resource.

* @return \Illuminate\Http\Response

public function index(Request $request)

{

if ($request->ajax()) {

$data = Student::query();

return Datatables::of($data)

->addIndexColumn()

->addColumn('action', function($row){

$btn = '<a href="javascript:void(0)" data-toggle="tooltip" data-id="'.$row->id.'" data-original-title="View" class="me-1 btn btn-info btn-sm showStudent"><i class="fa-regular fa-eye"></i> View</a>';

return $btn;

})

->rawColumns(['action'])

->make(true);

}

return view('students');

}

Step 7: Add Blade Files

So finally, first we will new file of “students.blade.php” in the “resources/views/” directory.

resources/views/students.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 11 Yajra Datatables Example - xpertphp.com</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.11.4/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.4/js/dataTables.bootstrap5.min.js"></script>
</head>
<body>
       
<div class="container">
    <div class="card mt-5">
        <h3 class="card-header p-3">Laravel 11 Yajra Datatables Example - xpertphp.com</h3>
        <div class="card-body">
            <table class="table table-bordered data-table">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Address</th>
                        <th width="100px">Action</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
       
</body>
       
<script type="text/javascript">
  $(function () {
        
    var table = $('.data-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('students.index') }}",
        columns: [
            {data: 'id', name: 'id'},
            {data: 'first_name', name: 'first_name'},
            {data: 'last_name', name: 'last_name'},
            {data: 'address', name: 'address'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ]
    });
        
  });
</script>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel 11 Yajra Datatables Example - xpertphp.com</title>

</head>

<body>

<h3 class="card-header p-3">Laravel 11 Yajra Datatables Example - xpertphp.com</h3>

<thead>

<tr>

<th>First Name</th>

<th>Address</th>

<th width="100px">Action</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

</div>

</body>

$(function () {

var table = $('.data-table').DataTable({

processing: true,

serverSide: true,

ajax: "{{ route('students.index') }}",

columns: [

{data: 'id', name: 'id'},

{data: 'first_name', name: 'first_name'},

{data: 'last_name', name: 'last_name'},

{data: 'address', name: 'address'},

{data: 'action', name: 'action', orderable: false, searchable: false},

]

});

</script>

</html>

Step 8: Run Laravel Application
We can start the server and run this example using the below command.

php artisan serve

1	php artisan serve

Now we will run our example using the below Url in the browser.

http://127.0.0.1:8000/students

1	http://127.0.0.1:8000/students

if you want to download source code then you can visit below link url for source code example github.

Download code from github