Add pagination back to datatables pages

[JonellaCulmer]

What we're after: In an effort to help orient our users when viewing multiple pages of data, we should update our pagination to include the number of results being viewed and total results. Presently, a user must rely on whether they notice the data in the table has changed with no confirmation. If a user clicks multiple times they may lose track of where they are in the list.

Before

After

Completion criteria:

• Research how page count estimates were tweaked in the past. When is it an estimate and when is it exact? Answer: counts are estimates when the estimate is over 500K. (code)
• Re-implement page counts on page

[johnnyporkchops]

FYI- The Pattern Library patter library has the alternate design patterns for showing estimated page counts and numbered buttons.
https://fec-pattern-library.app.cloud.gov/components/detail/feed-pagination.html

[JonellaCulmer]

@johnnyporkchops Thanks, John! I've updated the ticket.

[JonellaCulmer]

@johnnyporkchops I spoke too soon. This doesn't include controls on how to change the number of items seen on a page. I'll mock something up today or tomorrow.

[JonellaCulmer]

@johnnyporkchops What do you think about below?
I think I prefer the first one. Users already know to look for the pagination buttons there on the right.

[JonellaCulmer]

I've updated the mock-up in the original comment based on previous discussions.

[lbeaufort]

@JonellaCulmer, something that came up in discussion - can you show what the pagination would look like for a large results set - such as all 2020 schedule A data? It has 1,078,296 pages: https://api.open.fec.gov/v1/schedules/schedule_a/?api_key=DEMO_KEY&two_year_transaction_period=2020

[JonellaCulmer]

@lbeaufort A previous version of the pagination accounted for all pages. Listing pages 1, 2, 3...through to 1,000,000, etc. But that would add some visual clutter and confusion. And I'm not at all convinced that a user would page that far through the results without introducing new filters or sorting the data another way. I'm comfortable only listing some of the upcoming pages, not all of them.

[JonellaCulmer]

@rfultz Here's some mock-ups to account for the other states. Happy to chat further if you think it necessary.

The first shows that a page will move to the middle, if possible. The last shows what it looks like to be on the last page. With the page all the way to the right and the right pagination button disabled.

[rfultz]

The datatables logic wants to include the ellipses. Here's how it looks with only five stops between the < and >. Not super helpful.

Here's when we have 7 buttons/items: