jquery实现表格本地排序的方法

本文实例讲述了jquery实现表格本地排序的方法。分享给大家供大家参考。具体实现方法如下：
复制代码代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jquery 表格排序</title>
    <style type="text/css">
        thead
        {
            background-color: Blue;
            color: White;
        }
        tr.odd
        {
            background-color: #ddd;
        }
        tr.even
        {
            background-color: #eee;
        }
        .clickable
        {
            text-decoration: underline;
        }
        .hover
        {
            background-color: #5dd354;
        }
        .sorted
        {
            background-color: #ded070;
        }
        .page-number
        {
            color: Black;
            margin:2px 10px;
            padding:2px 5px;
        }
        .active
        {
            border:solid 1px red;
            background-color:#76a7d2;
            }
        .pager
        {
            margin-bottom:10px;
            margin-left:20px;
            }
    </style>
    <script type="text/javascript" language="javascript" src="js/jquery1.3.2.js"></script>
    <script type="text/javascript" language="javascript">
        $（function（） {
            jQuery.fn.alternateRowColors = function（） {                      //做成插件的形式
                $（"tbody tr:odd", this）.removeClass（"even"）.addClass（"odd"）; //隔行变色奇数行
                $（"tbody tr:even", this）.removeClass（"odd"）.addClass（"even"）; //隔行变色偶数行
                return this;
            };
            $（"table.myTable"）.each（function（） {
                var $table = $（this）;                       //将table存储为一个jquery对象
                $table.alternateRowColors（$table）;          //在排序时隔行变色
                $（"th", $table）.each（function（column） {
                    var findSortKey;
                    if （$（this）.is（".sort-alpha"）） {       //按字母排序
                        findSortKey = function（$cell） {
                            return $cell.find（"sort-key"）.text（）.toUpperCase（） + "" + $cell.text（）.toUpperCase（）;
                        };
                    } else if （$（this）.is（".sort-numeric"）） {       //按数字排序
                        findSortKey = function（$cell） {
                            var key = parseFloat（$cell.text（）.replace（/^[^d.]*/, ""））;
                            return isNaN（key） ? 0 : key;
                        };
                    } else if （$（this）.is（".sort-date"）） {          //按日期排序
                        findSortKey = function（$cell） {
                            return Date.parse（"1 " + $cell.text（））;
                        };
                    }
                    if （findSortKey） {
                        $（this）.addClass（"clickable"）.hover（function（） { $（this）.addClass（"hover"）; }, function（） { $（this）.removeClass（"hover"）; }）.click（function（） {
                            //反向排序状态声明
                            var newDirection = 1;
                            if （$（this）.is（".sorted-asc"）） {
                                newDirection = -1;
                            }
                            var rows = $table.find（"tbody>tr"）.get（）; //将数据行转换为数组
                            $.each（rows, function（index, row） {
                                row.sortKey = findSortKey（$（row）.children（"td"）.eq（column））;
                            }）;
                            rows.sort（function（a, b） {
                                if （a.sortKey < b.sortKey） return -newDirection;
                                if （a.sortKey > b.sortKey） return newDirection;
                                return 0;
                            }）;
                            $.each（rows, function（index, row） {
                                $table.children（"tbody"）.append（row）;
                                row.sortKey = null;
                            }）;
                            $table.find（"th"）.removeClass（"sorted-asc"）.removeClass（"sorted-desc"）;
                            var $sortHead = $table.find（"th"）.filter（":nth-child（" + （column + 1） + "）"）;
                            //实现反向排序
                            if （newDirection == 1） {
                                $sortHead.addClass（"sorted-asc"）;
                            } else {
                                $sortHead.addClass（"sorted-desc"）;
                            }
                            //调用隔行变色的函数
                            $table.alternateRowColors（$table）;
                            //移除已排序的列的样式,添加样式到当前列
                            $table.find（"td"）.removeClass（"sorted"）.filter（":nth-child（" + （column + 1） + "）"）.addClass（"sorted"）;
                            $table.trigger（"repaginate"）;
                        }）;
                    }
                }）;
            }）;
        }）;
        //分页
        $（function（） {
            $（"table.paginated"）.each（function（） {
                var currentPage = 0;
                var numPerPage = 10;
                var $table = $（this）;
                $table.bind（"repaginate", function（） {
                    $table.find（"tbody tr"）.hide（）.slice（currentPage * numPerPage, （currentPage + 1） * numPerPage）.show（）;
                }）;
                var numRows = $table.find（"tbody tr"）.length;
                var numPages = Math.ceil（numRows / numPerPage）;
                var $pager = $（"<div class="pager"></div>"）;
                for （var page = 0; page < numPages; page++） {
                    $（"<span class="page-number"></span>"）.text（page + 1）
                     .bind（"click", { newPage: page }, function（event） {
                         currentPage = event.data["newPage"];
                         $table.trigger（"repaginate"）;
                         $（this）.addClass（"active"）.siblings（）.removeClass（"active"）;
                     }）.appendTo（$pager）.addClass（"clickable"）;
                }
                $pager.insertBefore（$table）;
                $table.trigger（"repaginate"）;
                $pager.find（"span.page-number:first"）.addClass（"active"）;
            }）;
        }）;
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table class="myTable paginated">
            <thead>
                <tr>
                    <th class="sort-alpha">
                        Last Name
                    </th>
                    <th class="sort-alpha">
                        First Name
                    </th>
                    <th>
                        Email
                    </th>
                    <th class="sort-numeric">
                        Due
                    </th>
                    <th class="sort-date">
                        Date
                    </th>
                    <th>
                        Web Site
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        tmith
                    </td>
                    <td>
                        erthn
                    </td>
                    <td>
                        eth@gmail.com
                    </td>
                    <td>
                        $34.00
                    </td>
                    <td>
                       14 2009
                    </td>
                    <td>
                        ftp://www.baidu.com
                    </td>
                </tr>
                <tr>
                    <td>
                        TTmith
                    </td>
                    <td>
                        BJohn
                    </td>
                    <td>
                        jsmith@gmail.com
                    </td>
                    <td>
                        $50.00
                    </td>
                    <td>
                        Mar 2009
                    </td>
                    <td>
                        ftp://www.baidu.com
                    </td>
                </tr>
                <tr>
                    <td>
                        CSmith
                    </td>
                    <td>
                        John
                    </td>
                    <td>
                        DDDD@gmail.com
                    </td>
                    <td>
                        $50.00
                    </td>
                    <td>
                        Mar 2009
                    </td>
                    <td>
                        http://www.jb51.net
                    </td>
                </tr>
                <tr>
                    <td>
                        Smith
                    </td>
                    <td>
                        John
                    </td>
                    <td>
                        sdsf@gmail.com
                    </td>
                    <td>
                        $50.00
                    </td>
                    <td>
                        f32 2009
                    </td>
                    <td>
                        ffttp://www.jb51.net
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    </form>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。