Kyle Vassella Kyle Vassella - 3 months ago 16
jQuery Question

Dynamic pagination button animations (jQuery)

I'm working on a project which involves creating a dynamic search bar which searches through a list of students and dynamically paginates the results (10 students per page):

https://github.com/KyleVassella/Dynamic-Paginated-Search/tree/page-button-animation-broken

I've succeeded in dynamically returning matched students and dynamically appending the correct number of page buttons based on the number of results.

My last requirement is include a simple animation when transitioning between pages. I'm stuck on this.

When you first load the page you'll find the search function works correctly - even clicking the pagination buttons animates like it should. But once you press one of the pagination buttons, the search function partially breaks (try searching something after you change pages). It still returns the correctly matched array of students (see the console.log and the appended page numbers), but some of the results seem to be invisible.

I believe the problem lies in my showArray2() function on line 50 (which contains my animation) or the fact that I called this function inside of a $(document).on(click) function on line 97 - not sure.

Perhaps I need to go about another way such as appending CSS classes - but I still can't figure out how to apply some sort of opacity change fadeout/fadein like I want with that method. Can you solve this using my current jQuery .animate() strategy and if not, what about a different way (CSS classes, etc)?

Answer

From a structural standpoint, I believe the issue has to do with you relying on a single allstudents students variable.

Each search needs to be treated as an independent collection, drawn from the true original set of all students.

That being said, I believe you are searching the entire collection when you're searching after paginating, but you need to reset the visibility state of the entire original collection of students upon the start of new search.

Your search is returning the correct results and writing them to the page, but they haven't had their visibility reset so that's why they're not showing up.

...also your git repo as it's currently structured doesn't work ;)

Comments