这个表格排序 jQuery 脚本是如何工作的？

发布于 2024-11-07 17:38:59 字数 2547 浏览 0 评论 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>

在上面的程序中，当我单击时，它会对该列中的行进行排序。它还使用此文件中的 .sort 方法。

您能解释一下上面的代码是如何工作的，以及它的内部工作原理吗？这是我获得上述代码的链接：

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

原文

<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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

第七度阳光i 2024-11-14 17:38:59

内联注释中的解释：

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

        });

Comparison（排序）函数：

比较函数很有趣。为了使其更具可读性，请考虑以下函数和示例输入/输出：

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));

输出：

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

解释：

如果输入 'is，则 isNaN 函数返回 true不是数字”，否则为 false。方便的是，它将数字字符串视为数字。因此，如果我们要比较两个数字（无论是否是字符串），我们的比较函数会返回

+a > +b

附加 + 只是将字符串转换为真正的 javascript 数字对象，这意味着当文本代表数值。

如果任一单元格的内容不是数字，则比较函数返回

a > b

...，这仅对对象应用默认的 > 运算符。对于字符串，它将导致按字母顺序对字符串进行排序。

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