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.