Sorting script

[GoogleCodeExporter]

Table sorting script is too slow when there are many users.

1. Replace the existing script with something more efficient.
2. Set a cut-off limit of X rows for the script

Original issue reported on code.google.com by zetapri...@gmail.com on 13 Dec 2010 at 1:49

[GoogleCodeExporter]

Original comment by zetapri...@gmail.com on 13 Dec 2010 at 1:49

• Added labels: Unit-1

[GoogleCodeExporter]

Try this page for a sample. Not enough users there. We'll need to add some more.

http://realestate.zetaprints.com/?page=corporate-users;CorporateID=691CE112-908F
-4A05-8690-6333767CB8BF

Original comment by zetapri...@gmail.com on 14 Dec 2010 at 6:54

[GoogleCodeExporter]

Another table is the printer's homepage. It can be sorted to some extent too. 
Some customers have hundreds of catalogs.

Original comment by zetapri...@gmail.com on 14 Dec 2010 at 6:56

[GoogleCodeExporter]

Original comment by zetapri...@gmail.com on 1 Mar 2011 at 5:06

• Added labels: Unit-0.5
• Removed labels: Unit-1

[GoogleCodeExporter]

Original comment by aiky...@gmail.com on 1 Mar 2011 at 8:09

• Changed state: Started

[GoogleCodeExporter]

Tablesorter jquery plugin(http://tablesorter.com) needs table HTML included 
THEAD and TBODY tags.

Original comment by aiky...@gmail.com on 1 Mar 2011 at 10:45

• Changed state: OhHold

[GoogleCodeExporter]

Please, test the current script. It may stop working if thead/tbody are 
included.

Original comment by zetapri...@gmail.com on 1 Mar 2011 at 10:50

• Added labels: Unit-1
• Removed labels: Unit-0.5

[GoogleCodeExporter]

It can`t stop working if thead/tbody are included.

Original comment by aiky...@gmail.com on 2 Mar 2011 at 4:46

[GoogleCodeExporter]

Original comment by ad...@zetaprints.com on 24 Jun 2011 at 8:37

• Changed state: Started

[GoogleCodeExporter]

The performance of the sorting script is that it uses bubble sort algorithm 
which is O(n*n), and it lacks optimization for date type. Tablesorter jquery 
Plugin(http://tablesorter.com) uses the JS built-in sort function internally 
which uses the merge sort algorithm on most browsers. Merge sort is O(n*logn) 
in the worst condition and it scales well on large amount of items. Tablesorter 
also has optimization for date type and considers much on performance. So I 
choose to use Tablesorter script for sorting.

Original comment by hanl...@gmail.com on 24 Jun 2011 at 9:07

[GoogleCodeExporter]

1.Modify the markup of table html
1.1 add thead element and move the header row into thead, and remove the 
onclick attribute set on the table header cells,  result like:
<thead>
<tr><th title="Sort by this column">Name<sup class="info" title="Click on any 
header to sort the column" onclick="alert(this.title)">?</sup></th><th 
title="Sort by this column">Email</th><th title="Sort by this 
column">Registered</th><th title="Sort by this column">Last visit</th><th 
title="Sort by this column">Orders<sup title="Shows total number of orders 
since registration." class="info" onclick="alert(this.title)">?</sup></th><th 
colspan="2"><br></th></tr>
</thead>
1.2. add tbody element and move all other row into it, like
<tbody>
<tr id="8603640A-FC08-4BDB-B77F-F9CBA5B9764F" class="even"><td><a title="User 
profile" 
href="http://realestate.zetaprints.com/?page=user-profile;UserID=8603640A-FC08-4
BDB-B77F-F9CBA5B9764F">approvals master</a></td><td><a title="Email the user" 
href="mailto:approval@zetaprints.com">approval@zetaprints.com</a></td><td 
nowrap="nowrap">20 Dec 2006</td><td nowrap="nowrap">13 May 2009</td><td 
class="right"></td><td><a title="Click to modify the special role of the user" 
href="http://realestate.zetaprints.com/?page=corporate-modify;CorporateID=691CE1
12-908F-4A05-8690-6333767CB8BF">order approval</a></td><td><span title="View 
user details" class="click" 
onclick="window.location.href='?page=user-profile;UserID=8603640A-FC08-4BDB-B77F
-F9CBA5B9764F'">Profile</span></td></tr>
...
</tbody>
2.download the tablesort jquery plugin and add it the page
3.add the following script:
<script type="text/javascript">
$.tablesorter.addParser({ 
    // set a unique id 
    id: 'mydate', 
    is: function(s) { 
        // return false so this parser is not auto detected 
        return false; 
    }, 
    format: function(s) {
        var dateSplit = s.split(' ');
        return $.tablesorter.formatFloat(Date.parse(dateSplit[1]+''+dateSplit[0]+', '+dateSplit[2]));
    }, 
    // set type, either numeric or text 
    type: 'numeric'
}); 
$(document).ready(function() 
        { 
            $("#userList").tablesorter({
                headers:{
                    2 : { sorter: "mydate"  },
                    3 : { sorter: "mydate"  },  
                }
            }); 
        } 
);
</script>

Original comment by hanl...@gmail.com on 24 Jun 2011 at 9:18

[GoogleCodeExporter]

If you need me to upload files here, please do the html modification and then 
tell me what files I should modify, thanks

Original comment by hanl...@gmail.com on 27 Jun 2011 at 5:23

[GoogleCodeExporter]

Can't remove onclick - the current script will stop working. Suggestions ?

Original comment by ad...@zetaprints.com on 1 Jul 2011 at 12:43

[GoogleCodeExporter]

HTML updated as requested.

Original comment by ad...@zetaprints.com on 1 Jul 2011 at 6:09

[GoogleCodeExporter]

I removed the onclick attribute with js, can test now

Original comment by hanl...@gmail.com on 1 Jul 2011 at 8:25

• Changed state: ToTest

[GoogleCodeExporter]

Original comment by ad...@zetaprints.com on 1 Jul 2011 at 8:47

• Added labels: Period-201106

[GoogleCodeExporter]

Tested on
http://demo.zetaprints.com/
with 900+ users in the list
in 
FireFox - Test OK

Chrome - Test OK

IE7 - More Work. Sorting is rather slow and I even get a "Stop running script 
on this page" err from the browser.

IE8 - More Work. Sorting is rather slow and I even get a "Stop running script 
on this page" err from the browser.

IE9 - More Work. Sorting is rather slow.

Safari - Test OK

Opera - Test OK

Separate issues (suggestions):
1. Can we retain the styles after sorting? There are odd/even list item 
background color differences (sort_01.png) that get messed up (sort_02.png)

2. We should add some arrows next to the column names. Something like 
(sort_03.png).

Original comment by agur...@gmail.com on 1 Jul 2011 at 2:59

• Changed state: MoreWork

Attachments:

• sort_01.png
• sort_02.png
• sort_03.png

[GoogleCodeExporter]

[1,2] - post as a new issue

Slow sorting - does it make any difference which column you are sorting on?

Original comment by ad...@zetaprints.com on 4 Jul 2011 at 5:10

[GoogleCodeExporter]

Posted separate issues:
http://code.google.com/p/web-to-print-scripts/issues/detail?id=67
http://code.google.com/p/web-to-print-scripts/issues/detail?id=68

Slow sorting - "Registered" column does seem to get the script to slow down 
even more.

Original comment by agur...@gmail.com on 4 Jul 2011 at 8:00

[GoogleCodeExporter]

agurkov, Can I access your test page?

Original comment by hanl...@gmail.com on 5 Jul 2011 at 2:30

[GoogleCodeExporter]

Posted separate Issue 69 for the IE bug.

Original comment by agur...@gmail.com on 5 Jul 2011 at 11:47

• Changed state: TestOK