• Components
  • Pagination

Pagination

1 2 3 4 5 6 7 8 9 10 
@!jrmc.pagination({ object: fakeUsers({ currentPage: 4, total: 10 }) })
<div class="join">
<a role="button" href="#1" class="btn join-item btn-md">
  1
</a>

<a role="button" href="#2" class="btn join-item btn-md">
  2
</a>

<a role="button" href="#3" class="btn join-item btn-md">
  3
</a>

<a role="button" href="#4" class="btn join-item btn-active btn-md">
  4
</a>

<a role="button" href="#5" class="btn join-item btn-md">
  5
</a>

<a role="button" href="#6" class="btn join-item btn-md">
  6
</a>

<a role="button" href="#7" class="btn join-item btn-md">
  7
</a>

<a role="button" href="#8" class="btn join-item btn-md">
  8
</a>

<a role="button" href="#9" class="btn join-item btn-md">
  9
</a>

<a role="button" href="#10" class="btn join-item btn-md">
  10
</a>
</div>

Pagination size

1 2 3 4 5 6 7 8 9 10
1 2 3 4 5 6 7 8 9 10
1 2 3 4 5 6 7 8 9 10
1 2 3 4 5 6 7 8 9 10 
{{--  fake object users  --}}
@let(users = fakeUsers({ currentPage: 4, total: 10 }))

<div class="grid grid-cols-1 gap-2">
  @!jrmc.pagination({ object: users, size: 'xs' })
  @!jrmc.pagination({ object: users, size: 'sm' })
  @!jrmc.pagination({ object: users, size: 'md' })
  @!jrmc.pagination({ object: users, size: 'lg' })
</div>
<div class="grid grid-cols-1 gap-2"><div class="join">
<a role="button" href="#1" class="btn join-item btn-xs">
  1
</a>

<a role="button" href="#2" class="btn join-item btn-xs">
  2
</a>

<a role="button" href="#3" class="btn join-item btn-xs">
  3
</a>

<a role="button" href="#4" class="btn join-item btn-active btn-xs">
  4
</a>

<a role="button" href="#5" class="btn join-item btn-xs">
  5
</a>

<a role="button" href="#6" class="btn join-item btn-xs">
  6
</a>

<a role="button" href="#7" class="btn join-item btn-xs">
  7
</a>

<a role="button" href="#8" class="btn join-item btn-xs">
  8
</a>

<a role="button" href="#9" class="btn join-item btn-xs">
  9
</a>

<a role="button" href="#10" class="btn join-item btn-xs">
  10
</a>
</div>
<div class="join">
<a role="button" href="#1" class="btn join-item btn-sm">
  1
</a>

<a role="button" href="#2" class="btn join-item btn-sm">
  2
</a>

<a role="button" href="#3" class="btn join-item btn-sm">
  3
</a>

<a role="button" href="#4" class="btn join-item btn-active btn-sm">
  4
</a>

<a role="button" href="#5" class="btn join-item btn-sm">
  5
</a>

<a role="button" href="#6" class="btn join-item btn-sm">
  6
</a>

<a role="button" href="#7" class="btn join-item btn-sm">
  7
</a>

<a role="button" href="#8" class="btn join-item btn-sm">
  8
</a>

<a role="button" href="#9" class="btn join-item btn-sm">
  9
</a>

<a role="button" href="#10" class="btn join-item btn-sm">
  10
</a>
</div>
<div class="join">
<a role="button" href="#1" class="btn join-item btn-md">
  1
</a>

<a role="button" href="#2" class="btn join-item btn-md">
  2
</a>

<a role="button" href="#3" class="btn join-item btn-md">
  3
</a>

<a role="button" href="#4" class="btn join-item btn-active btn-md">
  4
</a>

<a role="button" href="#5" class="btn join-item btn-md">
  5
</a>

<a role="button" href="#6" class="btn join-item btn-md">
  6
</a>

<a role="button" href="#7" class="btn join-item btn-md">
  7
</a>

<a role="button" href="#8" class="btn join-item btn-md">
  8
</a>

<a role="button" href="#9" class="btn join-item btn-md">
  9
</a>

<a role="button" href="#10" class="btn join-item btn-md">
  10
</a>
</div>
<div class="join">
<a role="button" href="#1" class="btn join-item btn-lg">
  1
</a>

<a role="button" href="#2" class="btn join-item btn-lg">
  2
</a>

<a role="button" href="#3" class="btn join-item btn-lg">
  3
</a>

<a role="button" href="#4" class="btn join-item btn-active btn-lg">
  4
</a>

<a role="button" href="#5" class="btn join-item btn-lg">
  5
</a>

<a role="button" href="#6" class="btn join-item btn-lg">
  6
</a>

<a role="button" href="#7" class="btn join-item btn-lg">
  7
</a>

<a role="button" href="#8" class="btn join-item btn-lg">
  8
</a>

<a role="button" href="#9" class="btn join-item btn-lg">
  9
</a>

<a role="button" href="#10" class="btn join-item btn-lg">
  10
</a>
</div>
</div>

Pagination 99 pages

1 ... 37 38 39 40 41 42 43 ... 97 98 99 
@!jrmc.pagination({ object: fakeUsers({ currentPage: 40, total: 99 }) })
<div class="join">
<a role="button" href="#1" class="btn join-item">
  1
</a>

<a role="button"  class="btn join-item btn-disabled">
  ...
</a>

<a role="button" href="#37" class="btn join-item">
  37
</a>

<a role="button" href="#38" class="btn join-item">
  38
</a>

<a role="button" href="#39" class="btn join-item">
  39
</a>

<a role="button" href="#40" class="btn join-item btn-active">
  40
</a>

<a role="button" href="#41" class="btn join-item">
  41
</a>

<a role="button" href="#42" class="btn join-item">
  42
</a>

<a role="button" href="#43" class="btn join-item">
  43
</a>


<a role="button"  class="btn join-item btn-disabled">
  ...
</a>


<a role="button" href="#97" class="btn join-item">
  97
</a>

<a role="button" href="#98" class="btn join-item">
  98
</a>

<a role="button" href="#99" class="btn join-item">
  99
</a>
</div>

Pagination light

« »
« »
« »
« »
« »
« » 
@!jrmc.pagination.light({ object: fakeUsers({ currentPage: 4, total: 10 }) })
@!jrmc.pagination.light({ object: fakeUsers({ currentPage: 1, total: 1 }) })
@!jrmc.pagination.light({ object: fakeUsers({ currentPage: 1, total: 1 }), size: 'xs' })
@!jrmc.pagination.light({ object: fakeUsers({ currentPage: 1, total: 1 }), size: 'sm' })
@!jrmc.pagination.light({ object: fakeUsers({ currentPage: 1, total: 1 }), size: 'md' })
@!jrmc.pagination.light({ object: fakeUsers({ currentPage: 1, total: 1 }), size: 'lg' })
<div class="join">
<a role="button" href="#4" class="btn join-item btn-md">
  «
</a>


  <button class="btn join-item btn-md">Page 4</button>
<a role="button" href="#6" class="btn join-item btn-md">
  »
</a>

</div>

<div class="join">
<a role="button"  class="btn btn-disabled join-item btn-md">
  «
</a>

  <button class="btn join-item btn-md">Page 1</button>
<a role="button"  class="btn btn-disabled join-item btn-md">
  »
</a>
</div>

<div class="join">
<a role="button"  class="btn btn-disabled join-item btn-xs">
  «
</a>

  <button class="btn join-item btn-xs">Page 1</button>
<a role="button"  class="btn btn-disabled join-item btn-xs">
  »
</a>
</div>

<div class="join">
<a role="button"  class="btn btn-disabled join-item btn-sm">
  «
</a>

  <button class="btn join-item btn-sm">Page 1</button>
<a role="button"  class="btn btn-disabled join-item btn-sm">
  »
</a>
</div>

<div class="join">
<a role="button"  class="btn btn-disabled join-item btn-md">
  «
</a>

  <button class="btn join-item btn-md">Page 1</button>
<a role="button"  class="btn btn-disabled join-item btn-md">
  »
</a>
</div>

<div class="join">
<a role="button"  class="btn btn-disabled join-item btn-lg">
  «
</a>

  <button class="btn join-item btn-lg">Page 1</button>
<a role="button"  class="btn btn-disabled join-item btn-lg">
  »
</a>
</div>