Hi all
I’ve been working on a PHP review system, generally, we record people’s reviews and comments, works ok and displays in a long list with rich-snippets. I would like to sort this list with links at the top without page reload using javascript or a little jQuery.
Wondering if anybody can advise on the best approach?
To get an idea what I’m trying to do - https://jsfiddle.net/bj0de0cv/
Thanks, Barry
I think the most efficient way would be to apply the flex order property, since this requires minimal DOM manipulation. This only changes the visual order of the <li> elements without actually re-arranging them (which would be very costly). Here’s a fiddle.
I only implemented the date-sorting for demonstration here; also, maybe in real world you could fetch a JSON object with the review entries from the server so that you don’t have to parse this information from the DOM.
I’ve managed to fix this using the lightweight List.js
Good example here for exsiting lists - http://www.listjs.com/examples/existing-list
This is exactly what I need, a small amount of configuration which is very simply for the javascript newbie with lots of great options.
Updated fiddle - https://jsfiddle.net/bj0de0cv/1/
Having a small issue with the dates year, though perfect for anybody needing to sort data list with minimum fuss 
Update: Thanks a lot m3g4p0p, I think we posted the same time.
What you have looks much better, less code maybe, and without the additional calls for files.
Just looking at this now, and what do you think of list.js ?
Barry
Yeah that’s the thing, and you’ll get features you might not need. OTOH it comes at only 15.8kB, so that’s not overly dramatic. :-) If you want to do a lot of different sorting and filtering operations it might be worth a consideration.
However, this library does change the order of the elements in the DOM, which is simply unnecessary IMHO and not particularly performant – especially when the list grows larger. Apart from that it looks like a nice and clean solution though. (Although these operations are not that complex anyway, of course – unlike such a library you don’t have to care for all sorts of special cases, but you can simply custom write it according to your needs.)
Hmm… maybe you’re right.[quote=“m3g4p0p, post:2, topic:226233”]
in real world you could fetch a JSON object with the review entries from the server so that you don’t have to parse this information from the DOM
[/quote]
This sounded like a good approach, all the data is coming from mysql db with first instance ordered by most recent. This is also mainly mobile, though as you say:
this library does change the order of the elements in the DOM, which is simply unnecessary
The below is also correct, will save me lots of time when using similar functionality on different pages, though no guarantee I will.
If you want to do a lot of different sorting and filtering operations it might be worth a consideration.
Anyhow, a couple of options here, I’ll test both and see if I can see much speed improvements and what might be best for this project. Though again, thanks for you input m3g4p0p, given me some fresh ideas and better ways of doing things, once I understand your code 
Barry
Update: Is your code complete besides the rating functionality? Meaning, I could use this on production as is? And why is there a ‘th’ in the code? (.innerHTML.replace('th', '');)
Glad I could help! :-) Yes, the code should be complete AFAICT… although there’s always room for tweaking, of course. ^^ And it only applies to that particular scenario regarding class names etc., so you might have to adjust these aspects or write it in a more reusable way.
The Date.parse() method can’t handle a format like “February 12 th 2015”, so I simply removed it. Fortunately, there are no months with a “th” in it, hehe. I assume you’re generating this list with PHP or something, so another (and probably cleaner) possibility would be to add the Unix time stamp as a data attribute, such as
<span
itemprop="datePublished"
class="review-published-date"
data-date="1416092400000">
November 16th 2014
</span>
… this way you wouldn’t have to .parse() it at all. (Or, of course, fetch it as JSON in the first place.)
Haha I was thinking you had copied something that was using <tables>'s and left th = table header. This makes sense now. Perfect!
I’ll also need to replicate this for ‘2nd’ etc. Though again as you say, a proper timestamp would be the best approach, I am using php shouldn’t be too much fuss.
Great information here m3g4p0p, thanks alot, appreciated 
Ah yes, good catch! So no, it’s not complete. :-D
And the rating link maybe.
Is it hard to sort by rating also, like the other two links do?
And maybe as a flourish, we could do a reserve and rename the links to things like:
[sort by date] | [sort by rating]
So now when they’re clicked we get two operations in one
One click sorts, a second click reverses the sort.
No, it’s basically the same. You’d parse the rating from your ratingValue attribute, apply it to the object when creating the reviews array and write the sort- and handler-function analogously to the other ones.
You’d need a flag for the current sorting, such as
var ascending = true;
Then, in the click handler, check that flag, do the corresponding sorting and change the flag like
ascending = !ascending;
I’ll be AFK now for a while, but if you get stuck with the implementation I’ll gladly help you later. :-)
Cool!
Yes probably best I do a bit myself anyhow so I get a better understanding. Will post back if I have any issues.
Thanks again for detailed information,
Barry
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.