Hello! I set up a pagination variable from my backend (Xano) to include query parameters for 'page', 'offset', and 'per_page' and it seem to work as expected. However, I also need to query all data for my sort and filter through <input> and <select> elements. The pagination is preventing all data to render through the filter. I am not sure how to think through this. Appreciate any help!
TCG.Store
1 year ago
Can you share more details? Are you passing in input data?
are the events triggering via "click" events for filters?
m
1 year ago
@TCG.Store Thanks for responding! Yes, the input data and options in the select element are both dynamically rendered repeated list from the API. Everything works fine to pull all data from the API until I set up the pagination filter variable in my backend. The input is triggered by an 'input' event while the select is trigeered by a 'change' event. Hope that make sense?
👀1
TCG.Store
1 year ago
I'm trying to get this working myself to recreate this.
Using xano, but no luck so far, even to search/query anything
wonder if there is a xano setting that needs to be enabled somewhere for a more of a fuzzy search but you should be able to pass in everything else you set up
m
1 year ago
@TCG.Store I think it has to do with how I set it up: pagination in Xano; sorting and filtering in Toddle. They each worked fine until they come together, lol. I am simultaneously learning Toddle and Xano, they are both completely new to me. I am now trying to set up filtering in Xano instead. I will update if it works. 🙂
TCG.Store
1 year ago
ah, that might be it. Same here lol... I'm learning both toddle and xano in parallel lol --- a lot of fun but a small learning curve lol
I'll also keep you posted if i get it working
Max
1 year ago
Hi! If you do pagination in the backend, you also need to do sorting and filtering in the backend. Otherwise you won't have the available info 😊
m
1 year ago
@Max yes, I am finally realizing that after many hours trying to get each of them work separately! @TCG.Store it's a HUGE learning curve for me 😅, but it really is a lot of fun! 🙃
Then in Toddle, I build a few variables like currentPage, and an offset formula to calculate how many items to offset in the next page based on what is in the variable currentPage and how many items per page. I also build a 'Prev' and a 'Next' anchor tag with href attribute removed but keep the click event to set the currentPage variable and all the API again. You might know all that already, just wanted to put it here in case someone else needs it. It took me many hours to figure out! 😅 Hope this helps for what you are trying to build! 😀
❤️1
🙏1
TCG.Store
1 year ago
This is super helpful @m and does this also work for the search results? I did what you mentioned above and it's working for me 🙂 I have a variable capturing the currentpage and than if a user clicked "next" advances 1 page and same for previous page. But it isn't working for search results. Unable to go past the first page, but i do see the total number of pages for search and default results. Did you run into this issue?
TCG.Store
1 year ago
I have a "debug" area showing the number of pages per result, current page, and number of items resulted, but unable to go to the next page. Works by default until i search for anything lol
m
1 year ago
@TCG.Store yes, the previous and next navigation works for me for search results. I am not really an expert to troubleshoot other people's build yet, 😬 but I'd like to help. How do you set up your API parameters in Toddle?
TCG.Store
1 year ago
This is what i currently have setup in toddle
query = searchquery page = what page to return per_page = results per page
It works for anything default but for search, not working.
TCG.Store
1 year ago
when a user types into the search field, these are set
m
1 year ago
So, with my input click event, I did NOT set currentPage and per_page, all I did was set search query I also noticed you didn't have an offset in your query. That is important for pagination.
👀1
Tod
1 year ago
Great energy @m! Your continuous contribution to the toddle Community just made you advance to Community Level 3!
TCG.Store
1 year ago
ah, let me try that.
I also have this set on page load, not sure this is causing issues, but the page does appear blank without this
should i set up an offset? maybe that's my problem
do you have the offset? blank? or you passing something to xano?
TCG.Store
1 year ago
I also have this for my "next" button that i think works by default but isn't working for search results
m
1 year ago
I don't think you need to set all that variables on page load so that your data shows up. However, you do need to make sure, in Xano where you configure the custom query, you need to check the 'ignore empty values', otherwise when you search input is empty, it would not show anything.
Yes, I have seen it when my search wasn't built correctly. You had a lot of 'includes' in your custom query, maybe remove all but the search index so that it's easier to troubleshoot. I try to make ONE THING works first before I add more complexities. 🙂