4

Sounds like it should be a common problem, but I couldn't find any info on it.

Setup: I have a paginated list of items; each item has a remote: true "Delete" button, so any item can be removed with a remote ajax request.

Problem: Once you remove a number of items on the first page, going to the next page will result in you missing a number of items.

E.g. for 30 items with 10 items per page, removing 2 items on the first page and going to page 2 will result in you seeing items #12-22. (Because items 10-12 are now displayed on the first page in place of the once we've just removed.)

My current thoughts on it is to append the next item to the end of the list every time an item is removed, so that we always have 10 items per page, but I'd love to know if there's a better/simpler way of handling this problem.

Igor Ivancha
  • 3,413
  • 4
  • 30
  • 39
ddgd
  • 1,657
  • 1
  • 15
  • 25

1 Answers1

3

I think this is the right idea. After deleting an object you should reload the whole list+pagination with ajax.

The way big dynamic websites handle this is showing you results after given result instead of just offset by whatever number of items on the page is.

Great example could be Reddit, if you go to second page your url will be like https://www.reddit.com/?count=25&after=t3_41fk8j where last value is hash of the past post on the previous page.

Mike Szyndel
  • 10,461
  • 10
  • 47
  • 63
  • 1
    Yeah, I ended up just offsetting next page by the last item of the current page. Appending items turned out to be quite a bit more complicated, especially with infinite scroll in place. (And re-rendreing everything is not an option, way too resource intensive with infinite scroll in place.) – ddgd Jan 22 '16 at 08:37