#148 DataTables without page refresh using Hotwire Turbo Frames
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
Featured in playlists
![#147 DataTables - search, sort, pagination with Ransack and Pagy](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTk0MCwicHVyIjoiYmxvYl9pZCJ9fQ==--d6ca2945f17ca5fa3d3b7f780ac365ee2f8c6524/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
![#148 DataTables without page refresh using Hotwire Turbo Frames](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTk0MSwicHVyIjoiYmxvYl9pZCJ9fQ==--c55bf459bb6c4ac0c6008b9e01b3695da67cec8c/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
![#149 DataTables - Filters. Form fields OUTSIDE form. Checkboxes, radio buttons](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTk0NCwicHVyIjoiYmxvYl9pZCJ9fQ==--bead8736e0e68dcf7e75ac3ccad1d10cd8074ba4/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
Search, sort, filter tables
![#59 Hotwire Turbo Streams CRUD](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc4MiwicHVyIjoiYmxvYl9pZCJ9fQ==--7b4b94ff669cbcd3485cfcc3f72e9100df7eae48/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
![#60 Hotwire Turbo Streams Autocomplete Search](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc1MywicHVyIjoiYmxvYl9pZCJ9fQ==--c95f098cc49b4d72ecb027c13735c1bedf44cb78/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
![#63 Hotwire Modals (the right way)](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTg2MywicHVyIjoiYmxvYl9pZCJ9fQ==--29f62b39b302aa16a6e6c28453e036aaa724add0/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)