x
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<div class="p-8"> <p class="text-sm text-gray-6 mb-4 font-mono"> collection.current_page = 6 | collection.total_pages = 18 | collection.per_page = 25 </p> <nav class="midwest-pagination variant-default" aria-label="Pagination" data-controller="midwest-pagination" data-midwest-pagination-url-template-value="/posts?page=__PAGE__"> <div class="midwest-pagination-controls"> <a class="midwest-pagination-btn is-prev" aria-label="Go to previous page" href="/posts?page=5"> <div class="midwest-icon " aria-hidden="true"> <div class="midwest-icon-inner"> <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Arrow back"><title>Arrow back</title> <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M244 400L100 256l144-144M120 256h292"></path></svg> </div> </div> </a> <a class="midwest-pagination-btn" aria-label="Go to page 1" href="/posts?page=1">1</a> <span class="midwest-pagination-ellipsis" aria-hidden="true">…</span> <a class="midwest-pagination-btn" aria-label="Go to page 4" href="/posts?page=4">4</a> <a class="midwest-pagination-btn" aria-label="Go to page 5" href="/posts?page=5">5</a> <span class="midwest-pagination-btn is-current" aria-current="page">6</span> <a class="midwest-pagination-btn" aria-label="Go to page 7" href="/posts?page=7">7</a> <a class="midwest-pagination-btn" aria-label="Go to page 8" href="/posts?page=8">8</a> <span class="midwest-pagination-ellipsis" aria-hidden="true">…</span> <a class="midwest-pagination-btn" aria-label="Go to page 18" href="/posts?page=18">18</a> <a class="midwest-pagination-btn is-next" aria-label="Go to next page" href="/posts?page=7"> <div class="midwest-icon " aria-hidden="true"> <div class="midwest-icon-inner"> <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Arrow forward"><title>Arrow forward</title> <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M268 112l144 144-144 144M392 256H100"></path></svg> </div> </div> </a> </div> <div class="midwest-pagination-footer"> <form class="midwest-pagination-jump" data-action="submit->midwest-pagination#jump"> <label for="page-jump-13190">Page</label> <input type="number" id="page-jump-13190" autocomplete="off" min="1" max="18" value="6" data-midwest-pagination-target="jumpInput"> <button type="submit">Go</button> </form> <div class="midwest-pagination-per-page"> <label for="per-page-13190">Rows per page</label> <select id="per-page-13190" data-action="change->midwest-pagination#navigate"> <option value="/posts?per_page=10&page=1" > 10 </option> <option value="/posts?per_page=25&page=1" selected> 25 </option> <option value="/posts?per_page=50&page=1" > 50 </option> </select> </div> </div> </nav></div>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
38
39
40
41
42
43
44
45
46
47
<% # In a real app, `@posts` is a will_paginate-paginated ActiveRecord relation. # Here we build a struct that mirrors the will_paginate collection interface. # # will_paginate key attributes: # collection.current_page => current page (Integer) # collection.total_pages => total pages (Integer) # collection.per_page => per-page count (Integer) # # Typical controller setup: # # def index # @posts = Post.paginate(page: params[:page], per_page: params[:per_page] || 25) # end # # Typical view integration: # # midwest_pagination( # current_page: @posts.current_page, # total_pages: @posts.total_pages, # per_page: @posts.per_page, # page_url: ->(p) { url_for(page: p) }, # per_page_url: ->(n) { url_for(per_page: n, page: 1) } # ) collection = Struct.new(:current_page, :total_pages, :per_page, keyword_init: true).new( current_page: 6, total_pages: 18, per_page: 25 )%><div class="p-8"> <p class="text-sm text-gray-6 mb-4 font-mono"> collection.current_page = <%= collection.current_page %> | collection.total_pages = <%= collection.total_pages %> | collection.per_page = <%= collection.per_page %> </p> <%= midwest_pagination( current_page: collection.current_page, total_pages: collection.total_pages, per_page: collection.per_page, page_url: ->(p) { "/posts?page=#{p}" }, per_page_url: ->(n) { "/posts?per_page=#{n}&page=1" }, show_jump_to: true, show_per_page: true ) %></div>will_paginate Integration
How to adapt a will_paginate collection.
willpaginate exposes `currentpage,totalpages, andperpage`.
No params configured.
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Pagination/will_paginate
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."