Sorting a listview using jQuery?

Question

Here the code is only sorting the li items in ascending order.How to sort in both ascending and descending order by using this code Sorting <li> tags

 function sort(list, key) {
         $($(list).get().reverse()).each(function (outer) {
             var sorting = this;
             $($(list).get().reverse()).each(function (inner) {
                 if ($(key, this).text().localeCompare($(key, sorting).text()) > 0) {
                     this.parentNode.insertBefore(sorting.parentNode.removeChild(sorting), this);
                 }
             });
         });
     }

and

window.onload = function () {
         var desc = false;
         document.getElementById("stCodeDSC").onclick = function () {
             //             sortUnorderedList("list3", desc);

             sort('ul.conn1>li', 'td.code1');
             desc = !desc;
             return false;
         }

Any suggestion?

EDIT: If i give <0 then it is sorting in descending order..

EDIT2:

$(document).ready(function() {
         var desc = false;
         document.getElementById("stCodeDSC").onclick = function () {
             //             sortUnorderedList("list3", desc);

             sort('ul.conn>li', 'td.code');

             desc = !desc;
             return false;
         }
         document.getElementById("stNameDSC").onclick = function () {
             //             sortUnorderedList("list3", desc);

             sort('ul.conn>li', 'td.name');
             desc = !desc;
             return false;
         }
     });

FYI: When you have jQuery, you do never use window.onload. — Tomalak
– Tomalak, Commented Mar 26, 2012 at 11:26
Because jQuery provides an easy way to attach an event handler to the load event that does not require overwriting the global one. api.jquery.com/ready — Tomalak
– Tomalak, Commented Mar 26, 2012 at 11:48
When you have jQuery, you also do not use onclick or any of the other "native" onXYZ event handlers. I suggest you spend a little time reading about jQuery, because that's not how it is supposed to be used. — Tomalak
– Tomalak, Commented Mar 26, 2012 at 14:05

Tomalak · Accepted Answer · 2012-03-26 13:45:37Z

1

How about a jQuery plugin:

function elemLocaleCompare(left, right) {
    return $(left).text().localeCompare($(right).text());
}

$.fn.extend({
    sortList: function(order) {
        return this.each(function() {
            var $list = $(this),
                li = $list.children("li").toArray().sort(elemLocaleCompare);

            if (li.length == 0) return true;

            order = order || $list.data("nextOrder") || "asc";

            if (order == "asc")
                $list.append(li).data("nextOrder", "desc");
            else
                $list.append(li.reverse()).data("nextOrder", "asc");
        });
    }
});

Use like:

$("ol").sortList("asc");

// or...
$("#someList").sortList();  // initial sort order, "asc" is default

$("#someButton").click(function () {
  $("#someList").sortList();     // no argument -> toggle sort order
});

edited Mar 26, 2012 at 13:45

answered Mar 26, 2012 at 12:27

Tomalak

339k68 gold badges547 silver badges635 bronze badges

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

4 Comments

bala3569 Over a year ago

bala3569 Over a year ago

Here i need to sort based on code in a button click and name in another button click

bala3569 Over a year ago

look at my EDIT2..I need like that

Tomalak Over a year ago

@bala3569 I somehow thought you wanted to sort list items. You might want to use the jQuery tablesorter plugin for your problem. There is no use in re-inventing the wheel for this.

Collectives™ on Stack Overflow

Sorting a listview using jQuery?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related