{"id":1802,"date":"2019-09-23T15:35:25","date_gmt":"2019-09-23T19:35:25","guid":{"rendered":"http:\/\/mossiso.com\/?p=1802"},"modified":"2019-09-23T15:40:55","modified_gmt":"2019-09-23T19:40:55","slug":"js-pagination","status":"publish","type":"post","link":"https:\/\/mossiso.com\/2019\/09\/23\/js-pagination\/","title":{"rendered":"JS Pagination"},"content":{"rendered":"\n
Sometimes the seemingly long way round is actually the quickest way. I recently had a project at work that returned a bunch of results from a Solr database. The results are processed by Javascript and written to the page. The original page I was recreating had paginated results (10 results to a page). I thought it would be too much work to get that written into the page, and wanted to just let the JavaScript write all the results to the page. Unfortunately, this meant some queries took up to a full 30 seconds to load! That’s an eternity for the web! <\/p>\n\n\n\n
After playing with the settings and different ways of writing the results to the page I finally decided to just implement pagination. I thought it would take forever. It took a few hours…<\/p>\n\n\n\n
The trick is to complete the process in two steps. <\/p>\n\n\n\n
Step 1) create a function that returns an array of page numbers based on the number of results, the desired number of results per page, and the current page being viewed.<\/p>\n\n\n\n
Step 2) create a function that turns the array from the previous function into a bunch of links.<\/p>\n\n\n\n
Here is the result:<\/p>\n\n\n\n
\n See the Pen \n JS Pagination<\/a> by Ammon Shepherd (@ammonshepherd<\/a>)\n on CodePen<\/a>.<\/span>\n<\/p>\n