Programming Technology World

Showing posts with label yajra. Show all posts

Laravel using the Yajra DataTables package

To display a user list in Laravel using the Yajra DataTables package, you can follow these steps:

Install the Yajra DataTables package: Run the following command to install the Yajra DataTables package:

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

Add the Yajra DataTables service provider: Open the config/app.php file and add the following line to the providers array:

 
 Yajra\DataTables\DataTablesServiceProvider::class,

Publish the Yajra DataTables configuration file: Run the following command to publish the Yajra DataTables configuration file:

 
 php artisan vendor:publish --tag=config

This will create a datatables.php file in the config directory.

Create a route to fetch the users data: In your routes/web.php file, create a route to fetch the users data using the Yajra DataTables package:

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

Create a controller: Create a UserController controller by running the following command:

 
 php artisan make:controller UserController

Define the index method: In the UserController controller, define the index method to fetch the users data and return it as a JSON response:

use App\User;
use DataTables;

public function index()
{
    $users = User::select(['id', 'name', 'email']);

    return DataTables::of($users)->make(true);
}

This method selects only the id, name, and email fields from the users table and passes them to the DataTables::of() method to create a DataTable instance.

Create a view: Create a users.blade.php view file in the resources/views directory and add the following code:

@extends('layouts.app')

@section('content')
    <table id="users-table" class="table table-bordered">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
    </table>
@endsection

@push('scripts')
    <script>
        $(function() {
            $('#users-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route("users.index") }}',
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'name', name: 'name' },
                    { data: 'email', name: 'email' },
                ]
            });
        });
    </script>
@endpush
    

This view extends the layouts.app layout and defines a table with an ID of users-table. It also includes a JavaScript block to initialize the DataTable instance using the server-side processing mode and the route to fetch the users data.

Create a route to display the view: In your routes/web.php file, create a route to display the users.blade.php view:

 
 Route::get('/', function () {
    return view('users');
 });

Include the DataTables assets: In your layouts/app.blade.php file, include the DataTables CSS and JavaScript assets:

<!DOCTYPE html>
<html>
    <head>
        <title>@yield('title')</title>
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
    </head>
    <body>
        <div

User list in Laravel using Yajra DataTables

To create a user list in Laravel using Yajra DataTables, you can follow these steps:

Install Yajra DataTables: Install Yajra DataTables using Composer by running the following command in your terminal:

 composer require yajra/laravel-datatables-oracle

Create a new controller: Create a new controller by running the following command in your terminal:

 
 php artisan make:controller UserController

Add a method to retrieve the user data: Add a method to your UserController that retrieves the user data from your database. For example:

use App\Models\User;
use DataTables;

public function index()
{
    $users = User::select(['id', 'name', 'email']);

    return DataTables::eloquent($users)->toJson();
}

Create a view for the user list: Create a new view file for your user list. For example, create a file called users.blade.php in your resources/views directory:

<html>
<head>
    <title>User List</title>
    <link href="//cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" rel="stylesheet">
</head>
<body>
    <table id="users-table" class="display" style="width:100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
    </table>

    <script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="//cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
    <script>
        $(function() {
            $('#users-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route('users.index') }}',
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'name', name: 'name' },
                    { data: 'email', name: 'email' }
                ]
            });
        });
    </script>
</body>
</html>

Create a route for the user list: Create a route for your user list that points to your UserController's index method. For example:

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

Test your user list: Run your application and visit the /users route. You should see a table that displays the user data.

That's it! You now have a user list in Laravel using Yajra DataTables.

Laravel using the Yajra DataTables package

User list in Laravel using Yajra DataTables

how to call ssh from vs code