Using jQuery to filter through an unordered list and create pagination

Question

Hi folks,

I am new at this, so please forgive me when I ask to be specific with your answers. Thanks!

I'm working on a website where I have an unordered list of people with classes that define who they were (i.e. entertainer, politician etc).

At the top, I have a selection of filters that you can use to narrow the results down using those classes. When you click a filter, it essentially hides all of the list items except for the list items with the class you chose. And of course, an 'all' button that displays all of the text.

That said, I also am using pajinate.js to make pagination work with it.

The issue is that when I use the filters, the pagination doesn't update to reflect whats been filtered out.

Any advice? Is there another pagination plugin that supports filtering built in that I'm not aware of?

-j

Answer 1

I assume you're using the pajinate.js from this page: http://github.com/wesnolte/Pajinate

It looks like pajinate doesn't care what the class of the list items is, so it won't change the pagination when a user hides classes.

To make it work with pajinate.js, what I recommend is that maybe you can have another unordered list that is not nested in the page_container div, that you use to "store" the filtered items. Essentially, when a user chooses a filter, you would move all the filtered items from the content ul to a hidden ul, using the appendTo() and remove() functions on the set of elements that you want to hide/show. You may also need to call the pajinate() function on the page_container div after you move the list items around.

Hopefully someone else has a simpler solution!