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

  1. #1 by Daniel at November 16th, 2009

    Hello,

    First congratulations on your article …

    I’m trying to implement your solution with “observe_form” but I’m having a problem with IE (Internet Explorer) … When I click a link paging IE submit the form, and generates an error in pagination … you have seen or heard a story like this??

    Thanks

  2. #2 by Daniel at November 16th, 2009

    One more thing, I’m using will_paginate with ajax “RemoteLinkRenderer” … the error only happens in IE … Firefox works fine

  3. #3 by Chris at November 17th, 2009

    Hey Daniel,

    Can you post your controller and view code somewhere? I’m coding this on my local machine currently and haven’t tried it on IE yet. I will give it a try tomorrow and see if I can reproduce the problem.

    Thanks for the post!
    Chris

  4. #4 by Chris Sund at November 18th, 2009

    Also, Daniel, can you post the error message. - Thanks!

  5. #5 by Chris at November 29th, 2009

    Just a note, I tested this on IE and it worked fine. It must be a configuration issue.

  6. #6 by Dude at December 15th, 2009

    Hi: Sorting with ajax works great now! But using produces normal links which produce a GET request on click. The actual sorting column isn’t transferred. So everything messes up.
    How did you manage jumping to the next page using ajax?

  7. #7 by Dude at December 15th, 2009

    The last comment ate my <%= will_paginate @accounts%> tag

  8. #8 by Thomas at February 4th, 2010

    Great stuff, Chris, but I had to make a very minor change to preserve the query and make pagination work for data subsets :

    replace

    with

    { :query => params[:query] } } %>

    This makes sure the query lives on.

    Very nice, clean code otherwise, thanks again.

  9. #9 by Thomas at February 4th, 2010

    Hmm.. the previous post is supposed to read

    replace

    <%= will_paginate @accounts %>

    with

    <%= will_paginate @accounts, { :params => { :query => params[:query] } } %>

  10. #10 by Chris at March 5th, 2010

    Just a note. I also added the following to preserve the filter when using pagination…

    { :query => params[:query], :filter => params[:filter] } } %>

  11. #11 by Mutas at June 27th, 2010

    hi,

    but it says that can not find @accounts
    what is the problem???

(will not be published)

Anti-Spam Protection by WP-SpamFree

  1. No trackbacks yet.