How does this table-sorting jQuery script work?

Question

<html lang="en"> 
    <head> 
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
            <title>Sort plugin for jQuery</title> 
    </head> 
    <body> 

        <h1>Demo</h1> 

        <p>Click on the headers (fruit/quantity).</p> 

        <table> 
            <thead> 
                <tr> 
                    <th>Fruit</th> 
                    <th>Quantity</th> 
                </tr> 
            </thead> 
            <tbody> 
                <tr> 
                    <td>Grape</td> 
                    <td>15</td> 
                </tr> 
                <tr> 
                    <td>Apple</td> 
                    <td>4</td> 
                </tr> 
              </tbody> 
        </table>       

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
        <script src="jquery.sort.js"></script> 
        <script> 
            var th = jQuery('th'),
                li = jQuery('li'),
                inverse = false;

            th.click(function(){

                var header = $(this),
                    index = header.index();
                header
                    .closest('table')
                    .find('td')
                    .filter(function(){                     
                        return $(this).index() === index;
                    })
                    .sort(function(a, b){

                        a = $(a).text();
                        b = $(b).text();
                         return (
                            isNaN(a) || isNaN(b) ?
                                a > b : +a > +b
                            ) ?
                                inverse ? -1 : 1 :
                                inverse ? 1 : -1;

                    }, function(){
                        return this.parentNode;
                    });

                inverse = !inverse;

            });

        </script> 

    </body> 
</html>

In the above program when I click on the <th> it sorts the rows in that column. It also uses the .sort method from this file.

Can you explain how the above code works, and its inner working? This is the link where I got the above code:

http://qd9.co.uk/projects/jQuery-Plugins/sort/demo.html

sje397 · Accepted Answer · 2011-05-18 05:52:24Z

Explanation in comments inline:

th.click(function(){

            var header = $(this), // get the table header as a JQuery object
                index = header.index(); // get the index - column number - of the header
            header
                .closest('table') // get the table that contains the header
                .find('td') // find all the td objects
                .filter(function(){                     
                    return $(this).index() === index; // but filter that list so that only td's in the relevant column are selected
                })
                .sort(function(a, b){ // use the external 'sort' function (JQuery plugin) on our list of table data, and sort using this anonymous function to compare

                    a = $(a).text(); // compare the text content of two td elements, using alphabetic or numeric ordering where appropriate
                    b = $(b).text();
                     return (
                        isNaN(a) || isNaN(b) ?
                            a > b : +a > +b
                        ) ?
                            inverse ? -1 : 1 : // and invert the sort order if the 'inverse' flag is true
                            inverse ? 1 : -1;

                }, function(){
                    return this.parentNode; // the sort function returns a list of sorted elements - so returning the td parent returns the row, which means it sorts the table rows
                });

            inverse = !inverse; // toggle the inverse flag so that multiple clicks on the header invert the order

        });

Comaprison (sort) Function:

The comparison function is interesting. To make it more readable consider the following function and example input/output:

function compare(a, b) {
    return isNaN(a) || isNaN(b) ? a > b : +a > +b;
}

log("isNaN(\"hi\"):" + isNaN("hi"));
log("isNaN(8): " + isNaN(8));
log("isNaN(\"8\"): " + isNaN("8"));

log("compare(\"hi\", \"there\"): " + compare("hi", "there"));
log("compare(\"there\", \"hi\"): " + compare("there", "hi"));

log("compare(2, 4): " + compare(2, 4));
log("compare(4, 2): " + compare(4, 2));

log("compare(\"hi\", 2): " + compare("hi", 2));

Output:

isNaN("hi"):true
isNaN(8): false
isNaN("8"): false
compare("hi", "there"): false
compare("there", "hi"): true
compare(2, 4): false
compare(4, 2): true
compare("hi", 2): false

Explanation:

The isNaN function returns true if the input 'is not a number' and false otherwise. Conveniently, it considers strings of digits to be numbers. So if we are comparing two numbers (whether strings or not) our comparison function returns

+a > +b

Appending the + just converts the string to a real javascript numerical object, meaning that the text won't be alphabetically sorted when the text represents numerical values.

If either cell's contents is not a number, then the comparison function returns

a > b

...which just applies the default > operator for the object. In the case of strings, it will result in sorting the strings alphabetically.

Thanks for your comments .How does this Piece Code Work return ( isNaN(a) || isNaN(b) ? a > b : +a > +b )
Sje397: Can you please explain me the inner code working in sort.jsfile for the above program

Collectives™ on Stack Overflow

How does this table-sorting jQuery script work?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related