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!

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. — user1864610
– user1864610, Commented May 2, 2014 at 23:09
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
– evan, Commented May 2, 2014 at 23:14
@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
– Pointy, Commented May 2, 2014 at 23:37
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
– Ja͢ck, Commented May 2, 2014 at 23:57

Bellian · Accepted Answer · 2014-05-02 23:38:35Z

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 2, 2014 at 23:38

Bellian

2,16016 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sam Dufel Over a year ago

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.

Bellian Over a year ago

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.

seaofinformation Over a year ago

@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 Over a year ago

@SamDufel, I think you summed it up pretty perfectly.

Bellian Over a year ago

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);

.

Collectives™ on Stack Overflow

Best practice for sorting arrays, PHP or Javascript?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related