#147 DataTables - search, sort, pagination with Ransack and Pagy
Datatables - tables that you can search, sort, and paginate.
Gem Ransack is an great tool that I use in most of my apps to add search and sort.
Let's dive deep into how we can use Ransack!
At the end, we will also add pagination of our search results with gem Pagy.
When I was starting this channel, a Ransack
video was one of my first ideas.
But ransack is a tool that has so many features, I just didn't know how to approach it in an easy-to-learn manner.
I hope you enjoy the example usecases I demonstrate in this screencast.
Episode source code: https://github.com/corsego/147-datatables-ransack-pagy-search-sort-paginate/commit/6581e1311af36870a6cddce883274ea803b4b153
0:00 DataTables example
1:40 Ransack SORT
7:13 Ransack SEARCH
9:15 highlight search results
10:15 Date search fields
11:53 Select fields
13:45 One search field for many attributes
14:50 Search association
19:43 Ransack settings
22:08 Pagination with Pagy
24:20 Search, Sort and Pagination works!
0
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