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.