0

I use the kaminari pagination gem. I can restrict the results per page to 6. This is an example of my pagination in my products_controller:

def index
  @products = Product.order(:title).page(params[:page]).per(6)
end

But rather than hard coding the "6" in the pagination code, I want the user to be able to change this through the user interface view. I want a drop down menu on the view so that the user can select either "3", "6", or "9". How can I do this? I'm guessing it might involve an instance variable to store the user's selection but I'm not sure, can anyone help? I have this drop down menu in my application.html.erb:

<div id="per-page">
  <select>
    <option value="3">3</option>
    <option value="6">6</option>
    <option value="9">9</option>
  </select>
</div>
sawa
  • 165,429
  • 45
  • 277
  • 381

1 Answers1

0

Add a name (e.g. 'per') to your select field, e.g.:

<select name="per"> ... </select>

You might also want look into using select_tag, which will help you make sure that the appropriate option is selected based on the user's selection.

and then modify:

Product.order(:title).page(params[:page]).per(params.fetch(:per, '6').to_i)

which will get the user's selection (or '6' if none is selected), and coerce it to an integer (I'm not sure if this coercion is necessary for Kaminari).

Yes, you will probably need a "Go" button. You should be able to just wrapper your select field like:

 <form>
   <div id="per-page"> ... </div>
   <button>Go!<button>
 </form>

which should work because the default action of a form is the current page.

Assuming that you are using jQuery and that your select field has an ID of per, you could also omit the button (though you still need the form), and in JavaScript do:

$('#per').on('change', function() {
  $(this).closest('form').submit();
});

Some debugging suggestions

Put <%= debug params %> somewhere towards the bottom of application.html.erb (but inside body).

Try manually adding the per param to your URL, e.g., localhost:3000/search?per=3.

Jacob Brown
  • 7,221
  • 4
  • 30
  • 50
  • Sorry I'm really quite new to ruby, when you say add a name to the select field how do I do that? Also would I need like a "Go" button to reload the page to ensure that the amount per page requested is loaded? –  Jan 12 '15 at 19:57
  • @benjs.1, I've added some detail to my answer. – Jacob Brown Jan 12 '15 at 20:33
  • Thank you, I don't really want to use JavaScript though, is there a way of doing this without it? Maybe by using the get method? –  Jan 12 '15 at 20:39
  • Also even with the JavaScript (which I have placed within my Application.js) it still does not work, I think that it might be because in the per(params.fetch(:per, '6').to_i 6 is still being chosen rather than the selected value, but don't know enough to change this and make it correct? –  Jan 12 '15 at 20:41
  • Yeah, you don't need to use JS, just put a button in your form. I've added a couple debugging suggestions above. – Jacob Brown Jan 12 '15 at 20:49
  • It works when I add the per into the URL, e.g. http://localhost:3000/?per=9 but not through using the drop down menu and clicking "Go", is there anyway this can be fixed? Thank you for helping me, I do appreciate it –  Jan 12 '15 at 20:57
  • Hmm, do you see `per` in the URL after clicking the Go button? If not, did you add the name field to your select tag? – Jacob Brown Jan 12 '15 at 21:03
  • No it's not there when I click Go, yeah my select is this: –  Jan 12 '15 at 21:05
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/68680/discussion-between-kardeiz-and-benjs-1). – Jacob Brown Jan 12 '15 at 21:08