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

前端技术 2023/09/04 JavaScript

本文实例讲述了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.phpstudy.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.phpstudy.net
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    </form>
</body>
</html>

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

本文地址：https://www.stayed.cn/item/11299

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案