Html dropdown with paginate and search

I’m new to web applications in general, and I’m starting with Rails. I’m trying to create a ‘dropdown’ menu in the html.erb file using the ‘form.collection_select’ command, but I’d like it to include Paginate and Search Item . The biggest issue is pagination; I spent several days searching in the internet but was unable to find any solution. I could add pagination like this

Stack

, but it isn’t what should be. How do I make a dropdown menu using paginate that is inside the dropdown-menu ? javascript? css?

A dropdown will definitely use javascript. CSS is used for changing what an element on the page looks like, rather than how it functions. You may use CSS, but that isn’t what is going to allow you to add pagination functionality.

The big three gems that I am aware of for pagination are WillPaginate, Kaminari, and Pagy. Hopefully those names will get you started, and you will be able to use them to research a solution that works for you.

Good luck!

thanks for your reply, I used Kaminari for Pagination. as you see I added pagination but it is not beautiful. I would fix the pagination section into the drop-down menu. I could not find solution for that.

If I were writing the code, I would use something like this:

    <select onchange="window.location = '/posts?page=:page'.replace(':page', this.value)">
      <option value="1">Page 1</option>
      <option value="2">Page 2</option>
      <option value="3">Page 3</option>
      <option value="4">Page 4</option>
      <option value="5">Page 4</option>
      <option value="5">Page 5</option>
    </select>

To generate this part: '/posts?page=:page'.replace(':page', this.value), you can do something like:

'<%= posts_path(page: ':page') %>'.replace(':page', this.value)"

You will also need to know how many pages total there are, in order to generate the <option> items with a loop. You should be able to get that information from the Kaminari-paginated collection.

You can further improve it by adding the selected property to the page option that they are currently on. You can get that from params[:page].

I hope this helps.

1 Like