🚨 Pay Just $95/Year (Save 50%)β€”Black Friday Deal!

#148 DataTables without page refresh using Hotwire Turbo Frames

01/11/2023
hotwire turbo frames datatables

In the previous episode we added Search, Sort, and Pagination to a data table.
Turbo Frames will help us make it work WITHOUT PAGE REFRESH!
However we will have to solve some potential problems (page refresh, URL, update, redirects).

Episode source code: https://github.com/corsego/147-datatables-ransack-pagy-search-sort-paginate/commit/8f4ed9a855cc626a8e71a428cbae714f82daf98b
Based on this blogpost: https://blog.corsego.com/turbo-hotwire-custom-search-without-page-refresh

0:00 initial state of data tables, search, pagination
1:50 search without page refresh
4:10 search as you type (without clicking submit)
4:36 update URL as you search (turbo-action advance)
5:25 autosubmit after selecting in a dropdown (without clicking submit)
6:09 update URL as you sort
6:55 break out of turbo frame
9:22 clean up and summary

2
Join the conversation
Sign in to access PRO lessons, access private repos, leave comments, create watch lists.
We collect your email address, name and username to create your account. We do not share your email address with anyone else.