Best practice for sorting arrays, PHP or Javascript?

Question

So I've done quite a lot of research about this particular topic, and I still find myself somewhat confused as to the best approach. There are two parts to my question.

1.) Basically my page is accessing a MySQL music database which holds the entire discography by a particular artist. There are literally 1000's of items. The page's function is to display all items and sort them by a particular value in the array (which the user chooses from a pre-defined list) like title, date released, catalog number, category, etc.

From what I understand, there are two ways I could achieve the display & sorting. Once the user loads the page, the PHP could output the discography array immediately, echo it into a javascript object, then use javascript to do the sorting once the user clicks a button.

OR

After the user clicks a button, I could use AJAX to send the value by which the user wants all items sorted, use PHP ** or database server sorting, like ORDER BY ** to do the sorting and output the array in JSON. An array sorted by pagename, for example, would look like something this:

var discography = [
    {"id":"1",
     "pagename":"item100001",
     "category":"Albums",
     "Label":"Atlantic",
     "title":"Awesome Album",
     "date":"July 2, 1998",
     "country":"United States",
     "catalog":"666 3333 44444",
     "format":"CD"},
    {"id":"12",
     "pagename":"item100002",
     "category":"Albums",
     "Label":"Epic",
     "title":"Fun Music",
     "date":"January 22, 1992",
     "country":"United Kingdom",
     "catalog":"333 4444 5555",
     "format":"Cassette"},
      {"id":"3",
     "pagename":"item100003",
     "category":"Single",
     "Label":"Atlantic",
     "title":"Cool Single",
     "date":"October 12, 1988",
     "country":"United States",
     "catalog":"444 5555 66666",
     "format":"CD"}
    ];

Which I could then manipulate by jquery to output as html and display the items on the page.

The user should be able to sort and re-sort the items by whatever value they want, not just once.

Perhaps this question is oversimplifying the premise, but which is the smarter, faster and more efficient approach to array sorting? Server-side sorting (using AJAX and outputted as JSON) or Javascript? If it's server-side, I'm confident I'd know how to write functions to sort the data properly.

But if the answer is Javascript, that brings me to my second question.

2.) I have found plenty of wonderful javascript sorting functions out there, but I keep reading about the issue of "stable" versus unstable sorting in Javascript. Would this issue even apply? I definitely need this to be consistent across all browsers. Merge Sort is apparently a wonderful answer to this quandry, but since I need to sort by a particular field (category, date, etc), I would need a little direction on how to adapt the function to my purpose. But if I can do safe, consistent sorting without merge sort, then I'll just do that.

If you've read this far I appreciate it. Any help would be welcomed!

The user has to be able to sort the items by a particular value, so if I use server side scripting, I would use PHP do do sql queries, sorting, etc (which I covered already in my post). Is that what you mean? — seaofinformation, May 02 '14 at 23:06
You probably need to test this in action. Sorting on the client eliminates a round trip to the server and a data transfer. Sorting on the server, particularly if the database is doing the sorting, might be faster for the sort, but will require a round trip and data transfer. Which is better will depend on the amount of data to sort and transfer, the speed of the Internet connection and how concerned you are about you user's data cap. — , May 02 '14 at 23:09
Thank you @MikeW, you echo my thoughts exactly. I had wondered if I just needed to do my own on-the-ground test. There are going to be 1000's of items and I have wondered if sending it back and forth to/from the server would be just too much. If using javascript, however, I'm concerened about sorting stability issues. — seaofinformation, May 02 '14 at 23:12
The sorting stability issue isn't a problem. You're going to need to write your own comparator anyway so just give it some logic to know how to break a tie. If the name of the album is identical then use the database ID or the date or something. — evan, May 02 '14 at 23:14
@evan thanks for that insight, I appreciate it. Sounds doable. — seaofinformation, May 02 '14 at 23:19
Is @Pointy speaking about something I should know about? Sorry to come off as such a noob, but two people upvoted his/her comment so I'd love someone to describe what s/he means. — seaofinformation, May 02 '14 at 23:23
@seaofinformation using the database server to sort is not at all the same thing as doing it in PHP — Pointy, May 02 '14 at 23:31
@Pointy Oh yes, you're correct, sorry. And I know about ORDER BY, of course. It still would require a separate request to the database each time a user clicked on a different "Sort By" button...and it would need to be outputted in AJAX for the client to read. Do you think that would be faster than using javascript to do all the sorting? — seaofinformation, May 02 '14 at 23:36
@seaofinformation depends on the situation. If you're paginating the queries and the view on the client, then you basically have to sort in the database server, because it's the only thing that knows all the rows. If you've got really short lists that are always shown in their entirety, then you can sort at the client safely. — Pointy, May 02 '14 at 23:37
@Jack 1000+, but as the database grows, it could eventually be around 5000. And each item will have about 8 or so values in their array. — seaofinformation, May 02 '14 at 23:55
5000 items on a single page is quite unmanageable, you will probably want to reduce that to at most 50 per page and provide additional filters for the user to narrow it down. — Ja͢ck, May 02 '14 at 23:57
Indeed. I was thinking I would eventually want to do the "load as you scroll" (lazy load) approach for the longer lists, or split it up into pages (not unlike clothing websites which sort by price etc). — seaofinformation, May 03 '14 at 00:00
Well if you're paginating (and "lazy scroll" is a form of pagination) you're in the "sort at the server" boat almost unavoidably. — Pointy, May 03 '14 at 00:01

score 1 · Accepted Answer · answered May 02 '14 at 23:38

1

it is hard to say what the right way could be. I would prefer a javascript solution because it produces less traffic on the server.

With array.sort() you get all you need for sorting your array of objects by passing an compare function. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

array.sort(function(a,b){return a.id - b.id});

If the function returns 1 a is assumed to be greater than b, -1 means a is less than b and 0 means they are equal.

If there are many items it can happen that Javascript freezes your screen. in that case there are two Options. Handle everything on the server again or use WebWorker to do the sorting.

answered May 02 '14 at 23:38

Bellian

2,009
14
20

2

`because it produces less traffic on the server.` - that depends on the size of the data set. If you have a pool of 1000 items and a page size of 20, sorting + paging on the server side will result in less traffic, unless someone clicks the sorting / paging links over 50 times. – Sam Dufel May 02 '14 at 23:45
Thats right. I think traffic is not the right term. Would you prefer load or computation time? Also if I don't know much about the scenario there isn't much to tell. – Bellian May 02 '14 at 23:52
@Bellian thank you, I was concerned about freezing as well. If I used Javascript, I'd use a function which allows for a custom value (what to sort by). – seaofinformation May 03 '14 at 00:06
@SamDufel, I think you summed it up pretty perfectly. – seaofinformation May 03 '14 at 00:13
1

you could create a set of functions for each field, then use the switch command to select the right one `switch(sort_by){case 'id': func = function(a,b){...} break; case 'other_field': func = function(a,b){...} break; ....} array.sort(func);`. – Bellian May 03 '14 at 00:14

Best practice for sorting arrays, PHP or Javascript?

1 Answers1