Laravel: Fast Grid & Pagination – Part 3

It's about how development develops

Laravel: Fast Grid & Pagination – Part 3

Let’s give it a grid

The last article showed us how to fetch and show the records on a page.  Let’s start displaying them nicely in a grid.

A grid, as you may guess, is a table:
So, make the <body> section of your blade file to look like:

 <body>
 <h1>Users</h1> 
 <table id="visitsDataGrid" class="table responsive">
   <thead>
     <tr>
       <th>ID</th>
       <th>Name</th>
       <th> Email</th>
       <th>Created At</th>
     </tr>
   </thead>
   <tbody>
     @foreach($users as $user)
       <tr>
         <td>{{$user->id}}</td>
         <td>{{$user->name}}</td>
         <td>{{$user->email}}</td>
         <td>{{$user->created_at}}</td>
       </tr>
     @endforeach
    </tbody>
 </table>
 </body>

Try to browse the page. Now we are talking!

Finally a Grid!

Finally a Grid!

Yes, but…

Yes but, hmm, it’s just a table. For sure if you add more records to the user table, they will show after refreshing the page. But what about the grid? What happens if we have 100 records?
Well, let’s try it.
In your terminal, enter tinker again in case you are not there any longer:

php artisan tinker

Now type the following to add 90 more users:

factory(App\User::class, 90)->create();

Refresh the page.

Grid -- no pagination yet

Grid — no pagination yet

As you can see, all of the 100 records are there, but they are loading int the same page If your database had 100,000 users, it would take a long time to get them on the screen.

Here is where Lavarel show its power: with a little change both in the controller and in the blade files, we will get it working nicely. It’s so simple that is almost hard to believe. See how:

File: UserController.php – replace;

$users = User::all();

with

$users = User::paginate(10)

File: user.blade.php – Add the following before the closing body tag (</body>)

{{ $users->links() }}

Now we are really talking!

Grid WITH Pagination

Grid WITH Pagination

At this point, I am sure that you’ve realized what the role of the number 10 in

User::paginate(10)

In other words, it tells the page how many records to show per page. If you change it to 5, each page will have, well, 5 records and therefore there will be 20 per page selectors at the bottom of the page (5 X 20 = 100 records).

A Little Formatting

Now that we have it done, let’s tune up the page format by centralizing the page selectors and adding some left margin to the page.

For the selector, we just place it inside a div tag like this — added lines are bold:

<div class="text-center">

{{ $users->links() }}

</div>

Adding some margins is just a matter of using a little of Bootstrap 3 tags –added lines are bold:

<body>

<divclass="container">

   <h1>

     Users

   </h1>

   <divclass="row">

     <divclass="col-md-3 col-header">ID</div>

     <divclass="col-md-3 col-header">Name</div>

     <divclass="col-md-3 col-header">Email</div>

     <divclass="col-md-3 col-header">Created At</div>

    </div>

    @foreach($users as $user)

     <divclass="row">

       <divclass="col-md-3">{{$user->id}}</div>

       <divclass="col-md-3">{{$user->name}}</div>

       <divclass="col-md-3">{{$user->email}}</div>
 
       <divclass="col-md-3">{{$user->created_at}}</div>
 
     </div>

    @endforeach

    <divclass="text-center">

       {{ $users->links() }}

     </div>

  </div>

</body>

</html>

This is the result:

Final Grid

Final Grid

In the next article, we will see how to make it work for any table.

Subscribe to our newsletter…

and we will let you know when the next part is available.

 

Leave a Reply

Your email address will not be published. Required fields are marked *