Question

I am looking for some help in sorting div’s with PrototypeJS. Here is what I have so far:

document.observe('dom:loaded',function(){
    $$('.sortcol').invoke('observe', 'click', function() { 
        if (this.hasClassName('desc')) {
            var desc = false;
            this.removeClassName('desc');
        } else {
            var desc = true;
            this.addClassName('desc');
        }
        var colname = this.className;
        var contentid = this.up(2).id;
        sortColumn(contentid,colname,desc);
    });
});

function sortColumn(contentid,colname,desc) {
    $$('#'+contentid).select('.'+colname).sort(function(a,b){ 
        if (desc) {
            return (a.text.toLowerCase() >= b.text.toLowerCase() ) ? -1 : 1; 
        } else {
            return (a.text.toLowerCase() < b.text.toLowerCase() ) ? -1 : 1; 
        }
    });
} 

Example data:

<div id="contentbox_Users" class="userList">
    <div class="userListHeader">
        <div class="userListHeaderCell col1">First Name</div>
        <div class="userListHeaderCell col2">Last Name</div>
    </div>
    <div id="contentbox_People">
        <div class="userListRow">
            <div class="userListCell col1">John</div>
            <div class="userListCell col2">Smith</div>
        </div>
        <div class="userListRow">
            <div class="userListCell col1">Bob</div>
            <div class="userListCell col2">Ray</div>
        </div>
        <div class="userListRow">
            <div class="userListCell col1">Fred</div>
            <div class="userListCell col2">Jones</div>
        </div>
    </div>
</div>

Basically anything with a class “sortcol”, when it is clicked, I want it to sort by the column name clicked (class). The first issue is I need to be able to get the class name correctly when there is multiple classes. The classes are all like col1, col2, etc. How would I find the correct class?

The second thing is changing sortColumn so that it keeps column data together (each row is wrapped by another div) and output the result, replacing the current data.

This needs to be done in prototypejs and I can’t change the code to tables.

Thanks in advance for the help.

Answer 1

For the first part of your question it would be much easier if the column name was it’s own attribute like rel or data-*, but you say you cannot change the HTML. It is possible to pick out the likeliest class with regex…

var colname = this.className.match(/\bcol\d+\b/).first()

But this is unnecessary if we assume every row has the same columns in the same order. This would be a safer assumption if a table were used.

var colnumber = this.up().childElements().indexOf(this);

The second part of your question is easy, just sort the rows instead of the cells.

Your draft sortColumn function doesn’t actually change the elements – select returns an array of element references, not their container – so you need to do something with the resulting array. Luckily any append or insert action of an element causes it to be removed from it’s parent first, so simply append them once more and they’ll assume the correct order. No replacing is needed, I’ve seen libraries that bizarrely convert the elements to HTML, concatenate that then reinsert it!?!

The following has been tested.

document.observe('dom:loaded',function() {
    $$('.userListHeaderCell').invoke('observe', 'click', function() {
        this.toggleClassName('desc');
        var colnumber = this.up().childElements().indexOf(this);
        var content = this.up(2); // use the element directly instead of it's ID
        sortColumn(content, colnumber, this.hasClassName('desc'));
    });
});

function sortColumn(content, colnumber, desc) {
    content.select('.userListRow').sort(function(a,b){
        var atext = a.down(colnumber).innerHTML.stripTags().toLowerCase();
        var btext = b.down(colnumber).innerHTML.stripTags().toLowerCase();
        return atext.localeCompare(btext) * (desc ? -1 : 1);
    }).each(Element.prototype.appendChild, content);
}