Help

Proper use of fetchNextPage?

Topic Labels: API
1177 1
cancel
Showing results for 
Search instead for 
Did you mean: 
Joao_Machado
4 - Data Explorer
4 - Data Explorer

Hi guys,

I’m using Airtable.js with a base with over 800 records.

This is my basic code to retrieve the records in chunks:

  function updateTable() {
    table.select({
    maxRecords: 800,
    pageSize: 84,
    view: "Grid view",
    filterByFormula: filterDefault,
    sort: sortDefault
    }).eachPage(function page(records, fetchNextPage) {

      buildCard(records);
      buildModal(records);
      infiniteScroll(fetchNextPage)

      }, function done(err) {
      if (err) { console.error(err); return; }
      });
    }

    updateTable();

Here’s what happens though. If I use fetchNextPage() by itself, all the records will keep loading when I initialize the page. This is problematic because, as you can see, I have sorts and filters I want to use to redraw the table, but they won’t work well until all the data is loaded (I haven’t figured out how to stop ùpdateTable() halfway).

I have added an infiniteScroll to push more records only when I scroll down. However, if a filter is added, it will work, rendering the set of filtered results, but then it loads more random items if I scroll down, as if continuing an earlier fetchnextPage.

Does this make sense? This is my code for infiniteScroll:

function infiniteScroll (fetchNextPage) {
  $(window).on('scroll', function(){
    var scrollHeight = $(document).height();
    var scrollPos = $(window).height() + $(window).scrollTop();
    if ((scrollHeight - scrollPos) / scrollHeight == 0) {
      fetchNextPage();
      $(window).off("scroll");
    }
  });
}

And the filter:

$(document).ready(function() {

  $('#sort').click(function(){
    if($(this).hasClass('sorted')) {
      sortDefault.length = 0;
      $(this).removeClass('sorted');
    }
    else {
      $(this).addClass('sorted');
      sortDefault.push({field: "Nome", direction: "asc"});
    }
    $('.col-sm-6').remove();
    updateTable();
  });

I’m using jQuery 3.5.1.

1 Reply 1
Joao_Machado
4 - Data Explorer
4 - Data Explorer

I realised I could work around this by adding window.stop() to the click event. It’s not pretty since it throws an error in the console, but it works.