Laravel 10 Yajra Data Table Example

Yajra DataTables is a popular package that provides an easy way to work with DataTables.net in Laravel. It allows you to quickly build interactive data tables with advanced features such as filtering, sorting, and pagination. In this tutorial, we will show you how to use Yajra DataTables in Laravel 10.

Step 1: Install Yajra DataTables

To use Yajra DataTables in Laravel, you need to install it using Composer. Open your terminal or command prompt and run the following command:

composer require yajra/laravel-datatables-oracle:^10.0

This will install the latest version of Yajra DataTables for Laravel.

Step 2: Create a Database and Table

For this tutorial, we will create a simple database table called users. Open your database management tool and create a new database. Then, create a new table called users with the following schema:

id INT(11) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255),
email VARCHAR(255),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP

Step 3: Create a Model and Migration

Next, we will create a model and migration for the users table. Open your terminal or command prompt and run the following command:

php artisan make:model User -m

This will create a new model called User and a migration file for the users table.

Step 4: Seed the Database

To populate the users table with sample data, we will create a database seeder. Run the following command in your terminal or command prompt:

php artisan make:seeder UsersTableSeeder

This will create a new seeder file called UsersTableSeeder.php in the database/seeds directory. Open the file and modify it to look like this:

use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\DB;

class UsersTableSeeder extends Seeder
{
    public function run()
    {
        DB::table('users')->insert([
            'name' => 'John Doe',
            'email' => '[email protected]',
        ]);
        
        DB::table('users')->insert([
            'name' => 'Jane Doe',
            'email' => '[email protected]',
        ]);
        
        DB::table('users')->insert([
            'name' => 'Bob Smith',
            'email' => '[email protected]',
        ]);
    }
}

This seeder will insert three sample records into the users table.

Step 5: Run the Seeder

To run the seeder and populate the users table with sample data, run the following command:

php artisan db:seed --class=UsersTableSeeder

Step 6: Create a Controller and Route

Now we will create a new controller and route to display the data in the users table using Yajra DataTables.

Run the following command to create a new controller:

php artisan make:controller UserController

Then, open the UserController.php file in your text editor and modify it to look like this:

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

class UserController extends Controller
{
    public function index(Request $request)
    {
        if ($request->ajax()) {
            $data = User::latest()->get();
            return Datatables::of($data)
                    ->addIndexColumn()
                    ->make(true);
        }
    
        return view('
'user.index');
}
}

In this controller, we retrieve all the data from the `users` table using the `latest()` method and pass it to the `Datatables::of()` method. We also add an index column using the `addIndexColumn()` method. Finally, we return the data as JSON using the `make()` method. Next, open your `web.php` routes file and add a new route for the `UserController`:

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

Step 7: Create a Blade View

Finally, we will create a Blade view to display the data in the users table. Create a new file called index.blade.php in the resources/views/user directory and add the following code:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Yajra DataTables Example</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
</head>
<body>
  
<div class="container">
    <h1>Laravel Yajra DataTables Example</h1>
    <table class="table table-bordered" id="users-table">
        <thead>
            <tr>
                <th>No</th>
                <th>Name</th>
                <th>Email</th>
                <th>Created At</th>
                <th>Updated At</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
  
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
    $(function () {
        var table = $('#users-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: 'created_at', name: 'created_at'},
                {data: 'updated_at', name: 'updated_at'},
            ]
        });
    });
</script>
  
</body>
</html>

In this view, we use jQuery to initialize the DataTable and pass in the URL of the UserController index method. We also define the columns to display using the columns property.

Step 8: Test the Application

To test the application, run the following command:

php artisan serve

Then, open your web browser and navigate to http://localhost:8000/users. You should see a table with the data from the users table displayed using Yajra DataTables.

Conclusion

In this tutorial, we showed you how to use Yajra DataTables in Laravel 10 to create interactive data tables with advanced features such as filtering, sorting, and pagination. By following these steps, you should now be able to use Yajra DataTables to display data in your Laravel applications.