Auto-increment Numbers in Pagination in Blade File in Laravel

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).

Need of Auto-increment Numbers in Pagination in Blade File in Laravel

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.