Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Do you want to Display Auto-increment Numbers in Pagination in Blade File in the Laravel application?
This step-by-step tutorial helps you learn, The number for foreach loop in a table or in a list including the pagination, showing serial on the second page in the Laravel application with the help of the ($loop->index).
In the Laravel application, we use Laravel default pagination to show n number of items, The issue is that the number for foreach loop in a table or in a list including the pagination shows the second page by default Laravel provides {{ loop->iteration }} On the first page, it’s showing one to ten but on the second page, the problem is that it is still from the first number. Instead of 1 and 2, we need 11 and 12.
Let’s understand how to correct and use the serial numbers in the blade file using a real-time example in the Laravel application.
Step 1: Create Migration with Model
php artisan make:model Country -m
database/migrations/create_users_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('countries', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('code');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('countries');
}
};
Next, you can migrate table properties in the database with the artisan migrate command:
php artisan migrate
app\Models\Country.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Country extends Model
{
use HasFactory;
protected $fillable = ['name','code'];
}
Step 2: Create Seeder File
Create a country seeder to insert dummy records
php artisan make:seeder CountrySeeder
app\Database\Seeders\CountrySeeder.php
<?php
namespace Database\Seeders;
use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
use DB;
class CountrySeeder extends Seeder
{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
DB::table('countries')->truncate();
$countries = [
['name' => 'Afghanistan', 'code' => 'AF'],
['name' => 'Åland Islands', 'code' => 'AX'],
['name' => 'Albania', 'code' => 'AL'],
['name' => 'Algeria', 'code' => 'DZ'],
['name' => 'American Samoa', 'code' => 'AS'],
['name' => 'Andorra', 'code' => 'AD'],
['name' => 'Angola', 'code' => 'AO'],
['name' => 'Anguilla', 'code' => 'AI'],
['name' => 'Antarctica', 'code' => 'AQ'],
['name' => 'Antigua and Barbuda', 'code' => 'AG'],
['name' => 'Argentina', 'code' => 'AR'],
['name' => 'Armenia', 'code' => 'AM'],
['name' => 'Aruba', 'code' => 'AW'],
['name' => 'Australia', 'code' => 'AU'],
['name' => 'Austria', 'code' => 'AT'],
['name' => 'Azerbaijan', 'code' => 'AZ'],
['name' => 'Bahamas', 'code' => 'BS'],
['name' => 'Bahrain', 'code' => 'BH'],
['name' => 'Bangladesh', 'code' => 'BD'],
['name' => 'Barbados', 'code' => 'BB'],
['name' => 'Belarus', 'code' => 'BY'],
['name' => 'Belgium', 'code' => 'BE'],
['name' => 'Belize', 'code' => 'BZ'],
['name' => 'Benin', 'code' => 'BJ'],
['name' => 'Bermuda', 'code' => 'BM'],
['name' => 'Bhutan', 'code' => 'BT'],
['name' => 'Bolivia, Plurinational State of', 'code' => 'BO'],
['name' => 'Bonaire, Sint Eustatius and Saba', 'code' => 'BQ'],
['name' => 'Bosnia and Herzegovina', 'code' => 'BA'],
['name' => 'Botswana', 'code' => 'BW'],
['name' => 'Bouvet Island', 'code' => 'BV'],
['name' => 'Brazil', 'code' => 'BR'],
];
DB::table('countries')->insert($countries);
}
}
Step 3: Register the Seeder file
app\DatabaseSeeder.php
<?php
namespace Database\Seeders;
// use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
class DatabaseSeeder extends Seeder
{
/**
* Seed the application's database.
*
* @return void
*/
public function run()
{
$this->call(CountrySeeder::class);
}
}
Seed the Table
php artisan db:seed
Step 4: Create a Controller
php artisan make:controller CountryController
Step 5: Define web routes
routes\web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CountryController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
#List country
Route::get('/list-country',[CountryController::class,'index'])->name('list.country');
Step 6: Get data and pass it into the blade file
app\Http\Controllers\CountryController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Country;
class CountryController extends Controller
{
public function index()
{
$countries = Country::orderBy('name')->paginate(5);
return view('country.list',['countries' => $countries]);
}
}
resources\views\country\list.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-5">
<h3>Laravel Blade $loop: Auto-increment Numbers in Pagination</h3>
<p>Auto-increment Numbers in Pagination | Laravel </p>
<table class="table">
<thead>
<tr>
<th>Sr.no</th>
<th>Code</th>
<th>Name</th>
</tr>
</thead>
@forelse ($countries as $country)
<tbody>
<tr>
<td>{{ $countries->firstItem() + $loop->index }}</td>
<td>{{ $country->code }}</td>
<td>{{ $country->name }}</td>
</tr>
</tbody>
@empty
<p>No Post Found!</p>
@endforelse
</table>
{{ $countries->links() }}
</div>
</body>
</html>
Syntax : {{ $data->firstItem() + $loop->index }}
I hope that this article helped you learn How to handle Auto-increment Numbers in Pagination in Blade File In Laravel, with the help of the Laravel pagination example. You may also want to check out our guide on Display hasMany relationships in a Blade File in Laravel example in the Laravel application.