Sebagai programmer, kita pasti pernah membuat tabel yang berisi banyak data dan ingin membuat pagination. Yang menjadi masalah, ketika kita berpindah halaman, nomor baris tidak mengikuti nomor sebelumnya, namun mulai lagi dari 1. Misalnya kita memiliki 100 data dan ingin menampilkan masing-masing 5 data di tiap halaman. Selanjutnya kita memberikan penomoran. Di halaman pertama, sepuluh data pertama akan berurutan nomor 1-5. Ketika kita pindah ke halaman kedua, nomor yang harusnya mulai dari angka 6 malahan mulai lagi dari nomor 1. Begitu juga ketika pindah ke halaman ketiga, nomor yang seharusnya mulai dari 11 malah mulai lagi dari 1. Seperti ini (sebelumnya, siapkan tabel dummy apapun. saya menggunakan tabel contacts yang berisi nama dan phone number) :
routes/web.php
|
1 2 3 4 5 6 7 8 9 |
<?php use Illuminate\Support\Facades\Route; use App\Contact; Route::get('/', function () { $contacts = Contact::paginate(5); return view('welcome', compact('contacts')); }); |
App/Contact.php
|
1 2 3 4 5 6 7 8 9 10 |
<?php namespace App; use Illuminate\Database\Eloquent\Model; class Contact extends Model { protected $table = 'contacts'; } |
resources/views/welcome.blade.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel</title> <!-- Fonts --> <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> </head> <body> <table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">Name</th> <th scope="col">Phone</th> </tr> </thead> <tbody> <?php $no=1;?> @foreach($contacts as $contact) <tr> <th scope="row">{{ $no }}</th> <td>{{ $contact->name }}</td> <td>{{ $contact->phone }}</td> </tr> <?php $no++ ;?> @endforeach </tbody> </table> {{ $contacts->links() }} </body> </html> |
Halaman 1 :
Halaman 2 mulai lagi dari angka 1 :
Cara mengatasinya mudah sekali kok. Modifikasi views, dalam hal ini welcome.blade.php dan kita gunakan firstItem() function laravel. Ubah bagian tbody menjadi seperti ini :
|
1 2 3 4 5 6 7 8 9 10 11 |
<tbody> @foreach($contacts as $index => $contact) <tr> <th scope="row">{{ $index + $contacts->firstItem() }}</th> <td>{{ $contact->name }}</td> <td>{{ $contact->phone }}</td> </tr> @endforeach </tbody> </table> {{ $contacts->links() }} |
Kita coba refresh halamannya, dan sekarang lihat halaman 2 sudah dimulai dari nomor 6.
Halaman 3 juga akan dimulai dari nomor 11.
Simple kan?
Terima kasih, dengan postingan ini saya bisa menghirup nafas – yang mana sebelumnya sudah frustasi hehe