# Only display 5 items at a time with more button

**URL:** <https://www.ruby-forum.com/t/only-display-5-items-at-a-time-with-more-button/189500>\
**Category:** Rails\
**Created:** [June 1, 2010, 10:21pm UTC](https://www.ruby-forum.com/t/only-display-5-items-at-a-time-with-more-button/189500 "2010-06-01T22:21:48Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![hazmatt](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/h/b2d939/32.png) [@hazmatt](https://www.ruby-forum.com/u/hazmatt)\
**Post date:** [June 1, 2010, 10:21pm UTC](https://www.ruby-forum.com/t/only-display-5-items-at-a-time-with-more-button/189500/1 "2010-06-01T22:21:48Z")

</div>

I have the following code:

* * *

\<% @orders.reverse.each do |order| %\>

- \<%= link\_to\_remote( "#{order.id} #{order.name}" , :url =\> {:controller =\> 'orders', :action =\> 'show', :id =\> order.id }, :update =\> "order\_div", :method =\> 'get' ) %\>

\<% end %\>

* * *

I want to create a button or link to scroll these order items by 5 at a  
time. So it should display the first 5 by default. I will then be able  
to click a button below and it should scroll the next 5, hiding the  
previous.

I know this is a tall order. I’ve been looking into a lot of slider  
plugins. None of them do what I want. Most of them only scroll content  
one item at a time. The closest thing I used was easySlider (jQuery).  
Cool plugin, but I didn’t know how to adapt it to scroll by 5 items at a  
time. Plus, it messed up my css formatting and the items went all wonky  
each time I clicked the button to scroll to the next item.

I’m using (for now) jQuery, Prototype, and [Script.aculo.us](http://Script.aculo.us). I’m running  
different things from each JS library in separate parts of my app (to  
get a feel for what I want to use), so any help to do this kind of thing  
in any of these libraries will be much appreciated. I’m not stuck to one  
or the other. Thanks!

---

<div class="post-metadata">

**Author:** ![hazmatt](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/h/b2d939/32.png) [@hazmatt](https://www.ruby-forum.com/u/hazmatt)\
**Post date:** [June 1, 2010, 10:32pm UTC](https://www.ruby-forum.com/t/only-display-5-items-at-a-time-with-more-button/189500/2 "2010-06-01T22:32:32Z")

</div>

Matt R. wrote:

> * * *
> 
> \<% @orders.reverse.each do |order| %\>
> 
> - \<%= link\_to\_remote( "#{order.id} #{order.name}" , :url =\> {:controller =\> 'orders', :action =\> 'show', :id =\> order.id }, :update =\> "order\_div", :method =\> 'get' ) %\>
> 
> \<% end %\>
> 
> * * *
> 
> I want to create a button or link to scroll these order items by 5 at a  
> time. So it should display the first 5 by default. I will then be able  
> to click a button below and it should scroll the next 5, hiding the  
> previous.

Nevermind. I know I should post this at one of the JS framework forums.  
Only posted here to see if there is any way to take care of the Rails  
side of things to cut down on the JS work.

---

<div class="post-metadata">

**Author:** ![hazmatt](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/h/b2d939/32.png) [@hazmatt](https://www.ruby-forum.com/u/hazmatt)\
**Post date:** [June 1, 2010, 10:51pm UTC](https://www.ruby-forum.com/t/only-display-5-items-at-a-time-with-more-button/189500/3 "2010-06-01T22:51:11Z")

</div>

On 1 June 2010 21:32, Matt R. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote:

> Matt R. wrote:
> 
> > \<% @orders.reverse.each do |order| %\>

First off; rather than reversing the @orders; why don’t you have the  
finder that populates it order how you want? Seems like an extra,  
redundant step to me.

> Nevermind. I know I should post this at one of the JS framework forums.  
> Only posted here to see if there is any way to take care of the Rails  
> side of things to cut down on the JS work.

Then for your scrolling; you could use the commonly-used Will Paginate  
to return “pages” of five orders at a time. How you render the pages  
(with funky JS fading, etc) is your concern; but it’s not uncommon to  
use RJS (or your own JS) to replace the content of a div with the  
return from a controller.

---

<div class="post-metadata">

**Author:** ![hazmatt](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/h/b2d939/32.png) [@hazmatt](https://www.ruby-forum.com/u/hazmatt)\
**Post date:** [June 2, 2010, 8:04am UTC](https://www.ruby-forum.com/t/only-display-5-items-at-a-time-with-more-button/189500/4 "2010-06-02T08:04:49Z")

</div>

there is a function called in\_groups\_of … there is a railscast  
episode about it.  
I have used a manual scrolling slider similar to what you want at the  
bottom of [http://www.conikitv.com/](http://www.conikitv.com/) where it will grab the first  
hundred videos and display them in groups of 10 using the slider.

Basically the thinking is

- Fetch the items you want to show
- display them in groups of 10  
render how each group is displayed
- render the container for each group

I hope this helps.

Links: [#28 in\_groups\_of - RailsCasts](http://railscasts.com/episodes/28-in-groups-of)  
:  
[http://api.rubyonrails.org/classes/ActiveSupport/CoreExtensions/Array/Grouping.html#M001216](http://api.rubyonrails.org/classes/ActiveSupport/CoreExtensions/Array/Grouping.html#M001216)

---

<div class="post-metadata">

**Author:** ![hazmatt](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/h/b2d939/32.png) [@hazmatt](https://www.ruby-forum.com/u/hazmatt)\
**Post date:** [June 1, 2010, 10:58pm UTC](https://www.ruby-forum.com/t/only-display-5-items-at-a-time-with-more-button/189500/5 "2010-06-01T22:58:18Z")

</div>

Michael P. wrote:

> First off; rather than reversing the @orders; why don’t you have the  
> finder that populates it order how you want? Seems like an extra,  
> redundant step to me.

Thank you very much for the tip! I’m still getting the hang of Rails and  
Ruby. It was a way that worked quickly for me, but your way makes a lot  
more sense.

> Then for your scrolling; you could use the commonly-used Will Paginate  
> to return “pages” of five orders at a time. How you render the pages  
> (with funky JS fading, etc) is your concern; but it’s not uncommon to  
> use RJS (or your own JS) to replace the content of a div with the  
> return from a controller.

Perfect! Thank you very much. I’ve been working on this problem forever.  
Honestly had no idea how to achieve that functionality. I mainly wanted  
5 items at a time. Didn’t really care how I got there (thought JS would  
be the quickest, that’s why I posted this), so thank you very much for  
the solution!

– Matt R.

---

<div class="post-metadata">

**Author:** ![hazmatt](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/h/b2d939/32.png) [@hazmatt](https://www.ruby-forum.com/u/hazmatt)\
**Post date:** [June 2, 2010, 8:46pm UTC](https://www.ruby-forum.com/t/only-display-5-items-at-a-time-with-more-button/189500/6 "2010-06-02T20:46:08Z")

</div>

Matenia Rossides wrote:

> there is a function called in\_groups\_of … there is a railscast  
> episode about it.  
> I have used a manual scrolling slider similar to what you want at the  
> bottom of [http://www.conikitv.com/](http://www.conikitv.com/) where it will grab the first  
> hundred videos and display them in groups of 10 using the slider.
> 
> Basically the thinking is
> 
> - Fetch the items you want to show
> - display them in groups of 10  
> render how each group is displayed
> - render the container for each group

For efficiencies sake you shouldn’t fetch all the items up-front. The  
user may never scroll/page past the first couple of groups. Better to  
use will\_paginate to fetch the additional groups.
