I have a site where I need to paginate and filter a list of businesses by different criteria. In the business entry, I’m using the Reasons plugin tied to about 8 different lightswitches which, when activated, reveal different inputs that can be modified. For example, if it’s a restaurant, turning that lightswitch on reveals a toggle for if it’s local, and a channel of different types of restaurants to choose from. That business might also be a venue to host events, so activate Venue and you get a table input to add information about the rooms.
To view and sort all restaurants, In my template, I was pulling all businesses, looping through and if it’s a restaurant, create the list item. Filtering and pagination were then being handled by list.js. This allowed me to have two dropdowns — one for neighborhood and one for restaurant type. Simply select “Thai” and "Downtown" and the list updated instantly.
It all worked great when there were just a few items in the list. Now there are close to 500 businesses total and about 250 that are classified as restaurants. When I pull then entries, if there are north of 150 results that need to be listed, the page just becomes unresponsive.
I changed the way I was pulling the entries from pulling businesses and then filtering, to sending search criteria in the request, but that didn’t seem to help. The bottleneck seems to be in processing the list data and creating the list items to be paginated and searched. If I just list out the entry.title, it takes a bit but it works. If I add the filtering data attributes, phone, address, etc to the list items, it chokes.
Is there is a way to have live sorting on a page with a large dataset? I’d like to avoid page refreshes if possible. Perhaps pull json data, sort, and then just display the items that need to be rendered on the screen? I’m having trouble finding examples for alternate filtering methods for Craft.