#99 Hotwire: Search and Infinite Pagination (Ransack with Pagy)

09/12/2022
Free

Implementing search or pagination is relatively easy, but it can get tricky when you try to combine the two, especially when you factor in some frontend. In this eposide we will learn to use gem Ransack for search, and gem Pagy for infinite scroll pagination.

Episode source code: https://github.com/corsego/99-ransack-pagy-search-infinite-scroll/commit/ab6b64bb3f233d3deac9b7ed4a6532eb30d610bc

Text version: https://blog.corsego.com/hotwire-search-infinite-pagination

0:00 Final app demo with search and pagination
0:55 Boilerplate app
1:20 Ransack search
3:40 Search without page refresh
4:50 Remove submit button
5:40 Pagination with pagy
7:25 Infinite pagination
10:40 Stop endless pagination loop
11:35 Fix search
13:40 Query security
16:00 Highlight search results
17:05 Summary

0
Sign in to join the conversation

Current playlist

#59 Hotwire Turbo Streams CRUD #60 Hotwire Turbo Streams Autocomplete Search #63 Hotwire Modals (the right way)
+28
Just enough Hotwire for Rails developers
#1

#59 Hotwire Turbo Streams CRUD

40:56
#2

#60 Hotwire Turbo Streams Autocomplete Search

27:28
#3

#63 Hotwire Modals (the right way)

21:15
#4

#65 Hotwire SPA: Flash Messages

27:34
#5

#66 StimulusJS: Targets, Values, Classes. Build a PRO dropdown

34:30
#6

#67 Streams: Infinite Scroll Pagination

18:06
#7

#68 Frames: Infinite Scroll Pagination

17:47
#8

#69 Frames + Streams: Infinite Scroll Pagination (Best approach)

08:40
#9

#70: Hotwire: Live form validations and previews

18:46
#10

#73 Hovercards with Hotwire Turbo Frames

14:03
#11

#75 ActsAsVotable: likes, bookmarks, hotwire, vote scopes, cached votes

52:20
#12

#80 Dynamic Forms with Turbo (not JS approach)

18:23
#13

#81 StimulusJS: Conditionally display form fields based on selected value

08:21
#14

#82 Chained Select Fields in a form. Gem City-State

22:56
#15

#84 Cookies Consent Banner

10:10
#16

#98 Inline editing attributes with Hotwire

14:38
#17

#99 Hotwire: Search and Infinite Pagination (Ransack with Pagy)

17:26
#18

#100 Browser tab title notifications

16:43
#19

#110 Realtime Online User Tracking with Actioncable, Kredis, Turbo Broadcasts

24:13
#20

#113 Kredis Live counter, HTTP vs Websocket Turbo Broadcasts

13:59
#21

#119 Trello Clone. Advanced Kanban Drag and Drop Sortable Lists with Hotwire

42:19
#22

#121 Turbo Broadcasts CRUD Demystified

24:20
#23

#143 Turbo Permanent: persist Audio Video and Search results while navigating pages

06:30
#24

#144 Why I am replacing Turbo Frames with Streams for ActsAsVotable?

09:17
#25

#148 DataTables without page refresh using Hotwire Turbo Frames

10:59
#26

#151 Advanced Hotwire modals

21:29
#27

#152 Custom Turbo Streams. How to redirect from a form that is inside a turbo frame?

20:37
#28

#153 Refactoring Hotwire Modals

10:03
#29

#156 Turbo 8 Morphing in real life

32:58
#30

#163 Instant page loads with Turbo 8 prefetch (aka InstantClick)

06:01
#31

#181 Search and Autocomplete French Company Information

00:00