Pagination implementation


#1

Hi there! I’m getting a bunch of records using the API and I would like to paginate the results - in the end, I’d like to display to the user 10 records on a page, then when they hit ‘Next Page’ I can show them the next 10, and so on, requesting the next 10 from the server each time (as opposed to grabbing all the records myself and paginating them in the client).

I see that there is eachPage() and fetchNextPage(), but I may be confused about how they work. I use eachPage to get the records and massage the data I get by looping through the records. However, the done() function doesn’t seem to get called unless I call fetchNextPage() and I want to call fetchNextPage() after a user chooses to get to the next page of results. Any help/advice would be awesome!


#2

Hi Danny,

If you’re having a single page app, you can call “fetchNextPage” when the user clicks on the “next” link. The done callback would not be called unless the user clicked through all the pages. That’s actually perfectly fine.

Alex


#3

Ah ok, I think i understand it more - i had a callback in the done() that was necessary to render the information, but I moved that callback into the eachPage() itself (after looping through the records) and that seems fine.

Now I have two more questions :slight_smile:

  • Is there a way to retrieve the previousPage - fetchPreviousPage() - so a user would be able to move back and forth between them?
  • Is fetchNextPage() a member of the Airtable class? Do I call it like var base = new Airtable(…); base.fetchNextPage()?

Moving Airtable to SQL
#4

Hi Danny,

There’s isn’t a previousPage - you could just memoize those once your client fetches it. fetchNextPage is not a class member - it’s a helper that’s passed into a page callback.

Here’s exactly where it’s created https://github.com/Airtable/airtable.js/blob/2dad5fe2b5d7551fe67971c67fd7ad1be0a5f80f/lib/query.js#L82

Alex


#5

Ah ok - I can add memoization to save the previous results. However, I think I’m in a bind calling fetchNextPage(). My airtable has a couple of tables where the records of one are needed to fetch the records of another. Using async.waterfall, I’m calling 3 tables, using the results from the previous table to get more records needed.

The first stage of the waterfall, where I call select().eachPage() for many records, I was calling the waterfallCallback() in the airtable’s select().done() (which was called after reaching the last page of records). I can move the waterfallCallback() into the .eachPage() so I can get all the information I need for the next waterfall stage, but then I cannot call fetchNextPage() because it would call the same waterfallCallback().

Is there an offset that can be retrieved from getting a page, or can an offset or pageNumber be passed to a request?


#6

You may be better off using the lower level API. Take a look at
https://github.com/Airtable/airtable.js/blob/2dad5fe2b5d7551fe67971c67fd7ad1be0a5f80f/lib/table.js#L103 . As it’s a private method, it may be refactored, but if you have a strong use case, we can consider making it public.

With that, you can even store the offsets separately and fetch pages on demand.

Note, the offsets should be valid for a while, but not indefinitely - hours, not days. That may break some of the single page app logic.

Alex