Proper use of fetchNextPage?

Topic Labels: API
1427 1
Showing results for 
Search instead for 
Did you mean: 
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() {{
    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.

1 Reply 1
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.