jQuery hide post & show next post

I have a page (index.php) that pulls posts from mysql database. The posts are paginated, limited to 5 per page. Each post has a radio button pair (like/dislike). The index page also allows the user to show or hide all liked/disliked posts through checkboxes.

I don't want to reload the page at all, ajax or not. What I want is the next post in line to ap开发者_运维技巧pear at the bottom of the list as posts already there are hidden.

Let's say each page has 5 posts (l=liked/d=disliked/NA = not decided): Page 1: Post 1 (l), Post 2 (d), Post 3 (d), Post 4 (l), Post 5 (d) Page 2: Post 6 (NA), Post 7 (NA), Post 8 (l), Post 9 (NA), Post 10 (NA)

If the user decides to Hide all disliked - all disliked posts will hide but the result I get right now is: Page 1: Post 1 (l), Post 4 (l) Page 2: Post 6 (NA), Post 7 (NA), Post 8 (l), Post 9 (NA), Post 10 (NA)

What I want is: Page 1: Post 1 (l), Post 4 (l), Post 6 (NA), Post 7 (NA), Post 8 (l) Page 2: Post 9 (NA), Post 10 (NA)

Furthermore, the NEW posts appearing on Page 1 ought to fade in while the OLD posts (1 & 4) should have no such effect (other than slide up because the divs between them have "disappeared").

What I want to know for now is, Is this possible to do? If so, where can I go to get started?

I'll be updating with code as I learn more but for now I just need someone to point me in the right direction as google isn't helping me in this regard.

---

The dead-simple way to do this would be to send out an AJAX call every time the user changes their filter settings. Do the filtering in your MySQL query, and return the complete list of posts than should be showing. Then it's just a matter of completely replacing the current posts with the new ones.

There are ways to improve on this, like keeping previously-seen posts around but hidden to reduce the number of DB calls you'll need, but I'd definitely not bother with that if you're just starting the page. Even when you're closer to done I don't know if I'd bother - it's a lot of fairly complex code for a relatively minor optimization.

Hope this helps!

Edit: Some example SQL - this particular example will give you the first page of posts that are liked, assuming you display 10 posts per page:

SELECT * FROM posts WHERE liked = 1 LIMIT 10

Just tweak the WHERE clause for different filters, and the LIMIT clause for different numbers of posts per page (You'll probably need a JOIN in there too, if likes are on a per-user basis, but I didn't include that).

Then you replace all of the posts that are currently showing with all of the selected posts, using jQuery / AJAX.

---

The easiest way would probably be to do most of the filtering and the pagination client-side. There's even a jQuery plugin for pagination, while Filtering is as simple as $('.liked').hide().

You would have to return more than 2 posts to the client, of course.

---

so each time you make a call to the database when a Like/Dislike or Show/Hide All is clicked, you just want to return the results that matter...i.e. you are filtering ur results in the back-end rather then the front end

if you want to do this all in the front-end, your going to have to return more posts then two. maybe 5 or ten, and then hide and show the correct posts based on classes and click events on the page.