Proper use of fetchNextPage?

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() {{
    maxRecords: 800,
    pageSize: 84,
    view: "Grid view",
    filterByFormula: filterDefault,
    sort: sortDefault
    }).eachPage(function page(records, fetchNextPage) {


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


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) {

And the filter:

$(document).ready(function() {

    if($(this).hasClass('sorted')) {
      sortDefault.length = 0;
    else {
      sortDefault.push({field: "Nome", direction: "asc"});

I’m using jQuery 3.5.1.

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.

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.