PricingBlog

Pagination Conflicts with Query All Data

  • toddledoodle-1277691965101572158

    m

    1 year ago

    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-1277693757885517834

    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?
  • toddledoodle-1277696236018729072

    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-1277742782114566195

    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
  • toddledoodle-1277777674152054896

    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-1277812729377329245

    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.kayr-1277813832487796850

    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 😊
  • toddledoodle-1277821049777553488

    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! 🙃
    💪2
  • toddledoodle-1278057065880883241

    m

    1 year ago

    @TCG.Store I finally got it working! Here are a couple of Xano documentation that was the most helpful for me. First build out the search index:
    https://docs.xano.com/working-with-data/search
    https://docs.xano.com/working-with-data/functions/database-requests/query-all-records/external-query-manipulation/external-paging
    👀1
  • toddledoodle-1278059506437460061

    m

    1 year ago

    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-1278060428056068117

    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-1278061113766051904

    TCG.Store

    1 year ago

    1278061113703010356-CleanShot_2024-08-27_at_14.38.25.png
  • 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
  • toddledoodle-1278062488017178725

    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-1278066534509445160

    TCG.Store

    1 year ago

    This is what i currently have setup in toddle
    1278066534002065521-CleanShot_2024-08-27_at_14.59.51.png
  • query = searchquery
    page = what page to return
    per_page = results per page
  • It works for anything default but for search, not working.
  • tcg.store-1278067784466825227

    TCG.Store

    1 year ago

    when a user types into the search field, these are set
    1278067784487534693-CleanShot_2024-08-27_at_15.04.38.png
  • toddledoodle-1278068707951644672

    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-1278068709365121185

    Tod

    1 year ago

    Great energy @m! Your continuous contribution to the toddle Community just made you advance to Community Level 3!
  • tcg.store-1278069014429433927

    TCG.Store

    1 year ago

    ah, let me try that.
    1278069014668771328-CleanShot_2024-08-27_at_15.09.48.png
  • I also have this set on page load, not sure this is causing issues, but the page does appear blank without this
  • tcg.store-1278069169480404992

    TCG.Store

    1 year ago

    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-1278069793328463925

    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
    1278069792841924629-CleanShot_2024-08-27_at_15.12.36.png
    1278069793055965184-CleanShot_2024-08-27_at_15.12.41.png
  • toddledoodle-1278069818074861581

    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.
  • tcg.store-1278070286356316161

    TCG.Store

    1 year ago

    oh maybe this is my problem, i don't see the ignore empty values' in the API setup
  • tcg.store-1278070704331292814

    TCG.Store

    1 year ago

    oh wait, just found it lol
  • missed this check box lol
    1278070768282107926-CleanShot_2024-08-27_at_15.16.47.png
    👍1
  • toddledoodle-1278071072708759684

    m

    1 year ago

    @TCG.Store Your offset formula needs to be: Offset = (current page - 1) * per_page
    👀1
  • tcg.store-1278071548363800657

    TCG.Store

    1 year ago

    do you set this by default or for search results?
  • toddledoodle-1278071562418786488

    m

    1 year ago

    For all your page navigations, after you set the variable, you need to call the API again.
  • toddledoodle-1278071784532607067

    m

    1 year ago

    I set the offset formula in my API parameter.
    🔥1
  • tcg.store-1278071928808275988

    TCG.Store

    1 year ago

    something like this
    1278071928313221211-CleanShot_2024-08-27_at_15.21.17.png
  • toddledoodle-1278072222304571464

    m

    1 year ago

    Looks correct to me
  • tcg.store-1278072770298642484

    TCG.Store

    1 year ago

    just set it up
  • No luck on the pagination for search results 😦
  • toddledoodle-1278072995713257523

    m

    1 year ago

    When you do run&debug in Xano, did you get the correct data showing up?
  • tcg.store-1278073378879832074

    TCG.Store

    1 year ago

    yeah, it's all working perperly in xano
    1278073378636566663-CleanShot_2024-08-27_at_15.26.58.png
  • tcg.store-1278073723982708736

    TCG.Store

    1 year ago

    actually, i do see that when i pass in "page 5" it still appears page 1
    1278073723815202857-CleanShot_2024-08-27_at_15.28.22.png
  • not actually showing results of page 5, only loading page 1
  • toddledoodle-1278073886298210499

    m

    1 year ago

    @TCG.Store how did you set up pagination in Xano?
  • tcg.store-1278073892665036853

    TCG.Store

    1 year ago

    current page says "1" when i passed in to show me "page 5" of results
  • 1278073989490671656-CleanShot_2024-08-27_at_15.29.35.png
  • toddledoodle-1278074356676694016

    m

    1 year ago

    What about your External tab?
  • tcg.store-1278075832807592042

    TCG.Store

    1 year ago

    1278075832975229020-CleanShot_2024-08-27_at_15.36.55.png
  • tcg.store-1278076265617690674

    TCG.Store

    1 year ago

    1278076265399718019-CleanShot_2024-08-27_at_15.38.40.png
  • 1137560288154107905-@TCG.Store
    toddledoodle-1278076271355629708

    m

    1 year ago

    The search field should be empty if you are searching by custom query
    👀1
  • tcg.store-1278076342063337583

    TCG.Store

    1 year ago

    I also have these permissions
  • tcg.store-1278076609638695015

    TCG.Store

    1 year ago

    removed the "query" variable from search
    1278076609659801704-CleanShot_2024-08-27_at_15.39.53.png
  • toddledoodle-1278076782234566676

    m

    1 year ago

    Yes, that is correct. But you have to make sure you build your custom query correctly. The first Xano link I sent you walk you through all that.
  • tcg.store-1278076999486668843

    TCG.Store

    1 year ago

    ah, i followed the docs you shared. I set this up for the custom query
    1278076999285473280-CleanShot_2024-08-27_at_15.41.20.png
  • ignore the db tables lol
  • tcg.store-1278077449200209941

    TCG.Store

    1 year ago

    Oh oh, i'm missing an index in by db
  • Re-watching the video you shared from the docs
  • toddledoodle-1278077853547892817

    m

    1 year ago

    Yeah, I was just going to say that, you didn't set up the way it was in the video. 🙂 Your first operator should be 'search', not 'includes'
  • tcg.store-1278078214266159145

    TCG.Store

    1 year ago

    1278078214052380722-CleanShot_2024-08-27_at_15.46.17.png
  • I skipped an critical step lol -- let me set this up like the video and than test it
  • tcg.store-1278081539585871942

    TCG.Store

    1 year ago

    have you ever seen this error in xano?
    1278081539300921446-CleanShot_2024-08-27_at_15.59.30.png
  • toddledoodle-1278082739383439461

    m

    1 year ago

    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. 🙂
  • tcg.store-1278083014739628033

    TCG.Store

    1 year ago

    I removed them
    1278083014248890490-CleanShot_2024-08-27_at_16.05.24.png
    👍1
  • Looks like i get this error when i set sorting to by the index
    1278083218335072267-CleanShot_2024-08-27_at_16.05.14.png
    1278083218699980935-CleanShot_2024-08-27_at_16.06.07.png
  • If i remove it works (results are crap) but works
  • Tod-1278083293027500094

    Tod

    1 year ago

    Great energy @TCG.Store! Your continuous contribution to the toddle Community just made you advance to Community Level 7!
  • tcg.store-1278083329417150577

    TCG.Store

    1 year ago

    maybe the index needs to finish building?
  • toddledoodle-1278083442273292422

    m

    1 year ago

    I am not sure 🤨
    👀1
  • tcg.store-1278083462179586179

    TCG.Store

    1 year ago

    1278083462011551897-CleanShot_2024-08-27_at_16.07.15.png
  • tcg.store-1278086666703339634

    TCG.Store

    1 year ago

    opened at ticket with xano to help with this sorting issue, and in the meantime set it to something else to continue building
  • guessing i need to clear the redis cache to fix this. This is my guess
  • Also wanted to say thank you for helping me out with all of this @m -- really appreciate it.
  • Going to try to continuing playing around to see if i can get pagination to work on search results
  • toddledoodle-1278088528798027839

    m

    1 year ago

    @TCG.Store no problem! I hope you find the right solution!
    🙏1