Laravel Tutorial (5.7) Pagination

Last update on August 19 2022 21:50:37 (UTC/GMT +8 hours)

Step 1: Install Laravel 5.7

Type the following command.

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

Now, set up a database in the .env file.

Okay, next go to the terminal and hit the following command. php artisan migrate

It will create the two tables in the database. Now, we are using a faker library to populate the data in the database.

Step 2: Generating fake data in the database.

If you wonder how to install it, good news - it's already established for you in Laravel! Take a look at a default composer.json of Laravel. "require-dev":

"filp/whoops": "~2.0",
        "nunomaduro/collision": "~1.1",
        "fzaninotto/faker": "~1.4",
        "mockery/mockery": "~1.0",
        "phpunit/phpunit": "~7.0",
        "symfony/thanks": "^1.0"
},

Now, we just need to write the 6-7 lines of code to generate the fake users' data. Go to the database >> seeds >> DatabaseSeeder and add the following lines of code in it.

// DatabaseSeeder.php

/**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        $faker = Faker::create();
    	foreach (range(1,1000) as $index) {
            DB::table('users')->insert([
                'name' => $faker->name,
                'email' => $faker->email,
                'password' => bcrypt('secret'),
            ]);
        }
    }

First, we have created the faker object and then loop through different columns of users table and assign one property at a time. Every time loop was iterating; new random data is generated and attached to the particular columns. So that is how we can make different fake data for each user. Now type the following command to create the fake data. php artisan db:seed

Now you can see in the database and the users' table, there are lots of rows added. The db:seed command runs this file called DatabaseSeeder.php.

Step 3: Display the data to the frontend.

Now, go to the HomeController.php file and in that create one function called getUsers().

// HomeController.php

use App\User;

public function getUsers()
{
    $users = User::all();

    return view('index', compact('users'));
}

Define the route inside a web.php file.

// web.php

Route::get('/users', 'HomeController@getUsers')->name('users');

Finally, make one file inside resources >> views folder called index.blade.php.

<<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>Users Data</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="{{ asset('css/app.css') }}" rel="stylesheet" />
</head>
<body>
   <div class="container">
      <table class="table table-striped">
         <thead>
         <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
         </tr>
         </thead>
         <tbody>
            @foreach($users as $user)
            <tr>
               <td>{{ $user->id }}</td>
               <td>{{ $user->name }}</td>
               <td>{{ $user->email }}</td>
            </tr>
            @endforeach
         </tbody>
      </table>
   </div>
</body>
</html>

Right now, it displays all the rows, and that is what we want. We want to paginate thea data. So let us do that.

Step 4: Paginating Eloquent Results

We need to use the Paginate function provided by the Eloquent model. So replace the method of all() to paginate() and pass the number of rows as a parameter.

// HomeController.php

$users = User::paginate(15);

Now, we need to display the pagination web component at the front end. As we have talked earlier, Laravel's pagination object works well with Bootstrap CSS Framework. So, we just need to add the following code to table component inside index.blade.php file.

{{ $users->links() }}</code></pre>
<p>So, our whole index.blade.php file looks like this.</p>
<pre class="line-numbers">
<code class="language-php"><<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>Users Data</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="{{ asset('css/app.css') }}" rel="stylesheet" />
</head>
<body>
   <div class="container">
      <table class="table table-striped">
         <thead>
         <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
         </tr>
         </thead>
         <tbody>
            @foreach($users as $user)
            <tr>
               <td>{{ $user->id }}</td>
               <td>{{ $user->name }}</td>
               <td>{{ $user->email }}</td>
            </tr>
            @endforeach
         </tbody>
      </table>
      {{ $users->links() }}
   </div>
</body>
</html>

Converting Pagination Results To JSON

The Laravel paginator result classes implement the Illuminate\Contracts\Support\JsonableInterface contract and expose the toJson method, so it's effortless to convert your pagination results to JSON. So write the following code inside a web.php file.

Route::get('users', function () {
    return App\User::paginate(4);
});

Previous: Laravel Tutorial (5.7) Migration
Next: Laravel Tutorial (5.7) Redis