Archive for November, 2009

How to paginate, sort and search a table with Ajax and Rails (JQuery Style with will_paginate plugin)

Hey Everyone,

Today I decided to try and paginate, sort and search my account index using “Jrails” and “will_paginate” plugin. I took my ques from an article posted @ http://dev.nozav.org/rails_ajax_table.html#sec8. I changed it up a bit and switched out the prototype library with JQuery using the “Jrails” plugin to drop in JQuery. I also opted to use the “will_paginate” plugin rather than the classic_pagination plugin.

Screenshot1

Screenshot2



Resources:

script/plugin install git://github.com/futuresinc/jrails.git
script/plugin install git://github.com/mislav/will_paginate.git
Graphics for spinner.gif

I will try and keep this short and sweet, if you have questions please post a comment. I will do my best to answer them.

APPLICATION LAYOUT

Note: I had a problem when trying to use the observe_field due to the fact I have other js libraries loading. I would get an error “delayedObserver is not a function”. You need to make sure your other libraries don’t interfere with jrails loading. If you’re having this problem, remove everything else until you get it to work, and add back each js library one at a time. Just my experience.

VIEW (list.html.erb)

PARTIAL (_items_list.html.erb)

CONTROLLER METHOD

HELPER METHODS

DIFFERENCES

The major difference between the original article and this one is the fact that I had to replace the prototype syntax for jquery syntax in the controllers, helpers, and views. This mainly revolved around changing the following

Prototype: Element.show(’spinner’)

Jquery version: $(’#spinner’).show()

This applies to the hide element as well. I also used the will_paginate plugin

NEXT STEP FOR ME…

My next step I hope to accomplish today is add a drop down list so the user can choose which field they want to filter by. Once I add this, I will post my code. If I don’t add it, or come up with something different, I will post that.

Thanks!

Chris

Feel free to post comments. If you have a better way to do this, or feel I did something wrong I would love to hear.



ADDING SELECT TO CHOOSE SEARCH CRITERIA

This morning I tackled adding a select box so the user can choose which field they would like to search on. This wasn’t too difficult, but it caused me to use the “observe_form” helper rather than the “observe_field”. Here’s my code…

CONTROLLER METHOD

VIEW

PARTIAL

Note: This didn’t change

As always I’m open to comments or suggestions. I populated my database with 200K records and the search completed on each field in less than 3 seconds. I was really surprised and happy with the results. Let me know what you think.

Chris

11 Comments