Home/ Questions/Q 5848169
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T12:49:16+00:00

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

  • 0
<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:

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0