What are the methods to sort/filter $pages query in front end?

[Vigilante]

This is a pretty typical thing. Open a page, it does a $pages query, finds 112 things and I list them on the page. There is pagination too, 20 per page.

I want a sort dropdown box so the visitor can change alpha sort or whatever other sorts and filters I eventually use.

My first thought is to just refresh the page with a url query like "page/?sort=az" and then adjust the query in the template code. But to do this, it will require a page refresh, which means the sort box goes back to its default, and not sure how it effects pagination.

If I do a page refresh, I'll have to keep the sort settings in the session or something, to make sure I always apply correct sort on page load.

But at the same time, I've already got the $pages array, it would be much nicer to shuffle it and update the page without a page refresh, rather than run the query over and over again.

But then again, the pagination buttons already cause page refreshes, so that is already happening anyway, unless I convert the pagination buttons to also be no-refresh somehow.

 

I figure this is a very common problem, to paginate results and give users a sorting/filtering option. What is the common methods for handling it? Session, url query, ajax? If I just add the sort to the url query, how do I make that work in the pagination links?

[Kiwi Chris]

The beauty of Processwire is that it doesn't predefine output of content, so there's no reason why you couldn't create a template that returns JSON and call it using an ajax request from the HTML template that you want to update.

It does mean two templates for one page, although using URL segments it might be possible to have a single template that can return either HTML or JSON depending on the value of the URL segment, although you could do that with parameters as well.

 

[dragan]

Well, today you'd use lazy-loading techniques (load 20 items on load, and then 20 more with "show more" etc.), therefore eliminating the need for classic pagination, or show the current page-set in the URL.

With endless scrolling and pagination, you could try something like this: https://elkfox.github.io/Ajaxify/ 
Ajaxination - Normal pagination style but load the page without reloading, uses push states.

 

[Pixrael]

you can use https://processwire.com/docs/tutorials/how-to-use-url-segments/ 

you will get page/a-z instead of page/?sort=az ..using this segments you can search, filter, sort the pages results and update too the "sort box" (select, radio buttons, tabs, any) by this value

[Vigilante]

14 hours ago, dragan said:

Well, today you'd use lazy-loading techniques (load 20 items on load, and then 20 more with "show more" etc.), therefore eliminating the need for classic pagination, or show the current page-set in the URL.

With endless scrolling and pagination, you could try something like this: https://elkfox.github.io/Ajaxify/ 
Ajaxination - Normal pagination style but load the page without reloading, uses push states.

 

That's cool but seems to be a Shopify plugin.

I would prefer the endless click one to load more, but that does mean it's not so easy to bookmark or link to page 4 or 18. To come back to the page only to have to click 'more' 6 more times is annoying without very robust URL hashing techniques. It's overkill for this project.

So I'll stick to either classic page-refresh pagination, or an ajax based no-refresh pagination as long as the URL works for it.

[Vigilante]

14 hours ago, Pixrael said:

you can use https://processwire.com/docs/tutorials/how-to-use-url-segments/ 

you will get page/a-z instead of page/?sort=az ..using this segments you can search, filter, sort the pages results and update too the "sort box" (select, radio buttons, tabs, any) by this value

I wonder if segments are the best in my case given that it could potentially have more than just alpha sort. 

Right now I'm only sorting a list of companies, so alpha sort is probably all I'll need. But on the same site will be a catalog of products, and of course that could have a dozen different sortable/filterable values. I don't want URLs like page/a-z/blue/under-100/newest/....  The classic URL properties would work best I think. Plus segments are not really hackable. In the above URL, what if they don't sort by under-100 and that part is missing? I would have to test every segment to figure out which filter it is, in what order. 

[Pixrael]

Check this website, maybe it can help in your ideas

https://processwire.com/about/sites/list/ohm-speakers/

[dragan]

Right. That would be Datatables and Ion.RangeSliders.

[Jonathan Lahijani]

On 11/30/2017 at 2:57 PM, Vigilante said:

My first thought is to just refresh the page with a url query like "page/?sort=az" and then adjust the query in the template code. But to do this, it will require a page refresh, which means the sort box goes back to its default, and not sure how it effects pagination.

The sort box will go back to the default/first option, unless you program some basic logic to make it selected.  Something like this should work:

<?php
$sort = $input->get->string('sort'); // sanitize url variable shorthand
?>

<select name="sort">
  <option value=""></option>
  <option value="title" <?php if($sort=="title"): ?>selected<?php endif; ?>>Title (Asc)</option>
  <option value="-title" <?php if($sort=="-title"): ?>selected<?php endif; ?>>Title (Desc)</option>
  <option value="price" <?php if($sort=="price"): ?>selected<?php endif; ?>>Price (Asc)</option>
  <option value="-price" <?php if($sort=="-price"): ?>selected<?php endif; ?>>Price (Desc)</option>
</select>

 

[Vigilante]

12 hours ago, Jonathan Lahijani said:

The sort box will go back to the default/first option, unless you program some basic logic to make it selected.  Something like this should work:

Yes, not sure why I didn't realize that before.

 

Well for now I'm doing full page refreshes, it's ok for this particular site, but I would like to explore the ajax no-refresh solutions that can keep URLs in tact and support back/forward actions.