recherche

Maison >interface Web >js tutoriel >jquery crée une fonction de tri local des tables

jquery crée une fonction de tri local des tables

php中世界最好的语言
php中世界最好的语言original
2018-04-26 09:17:451074parcourir

这次给大家带来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() {                      //做成插件的形式
                $(&#39;tbody tr:odd&#39;, this).removeClass(&#39;even&#39;).addClass(&#39;odd&#39;); //隔行变色 奇数行
                $(&#39;tbody tr:even&#39;, this).removeClass(&#39;odd&#39;).addClass(&#39;even&#39;); //隔行变色 偶数行
                return this;
            };
            $(&#39;table.myTable&#39;).each(function() {
                var $table = $(this);                       //将table存储为一个jquery对象
                $table.alternateRowColors($table);          //在排序时隔行变色
                $(&#39;th&#39;, $table).each(function(column) {
                    var findSortKey;
                    if ($(this).is(&#39;.sort-alpha&#39;)) {       //按字母排序
                        findSortKey = function($cell) {
                            return $cell.find(&#39;sort-key&#39;).text().toUpperCase() + &#39;&#39; + $cell.text().toUpperCase();
                        };
                    } else if ($(this).is(&#39;.sort-numeric&#39;)) {       //按数字排序
                        findSortKey = function($cell) {
                            var key = parseFloat($cell.text().replace(/^[^\d.]*/, &#39;&#39;));
                            return isNaN(key) ? 0 : key;
                        };
                    } else if ($(this).is(&#39;.sort-date&#39;)) {          //按日期排序
                        findSortKey = function($cell) {
                            return Date.parse(&#39;1 &#39; + $cell.text());
                        };
                    }
                    if (findSortKey) {
                        $(this).addClass(&#39;clickable&#39;).hover(function() { $(this).addClass(&#39;hover&#39;); }, function() { $(this).removeClass(&#39;hover&#39;); }).click(function() {
                            //反向排序状态声明
                            var newDirection = 1;
                            if ($(this).is(&#39;.sorted-asc&#39;)) {
                                newDirection = -1;
                            }
                            var rows = $table.find(&#39;tbody>tr&#39;).get(); //将数据行转换为数组
                            $.each(rows, function(index, row) {
                                row.sortKey = findSortKey($(row).children(&#39;td&#39;).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(&#39;tbody&#39;).append(row);
                                row.sortKey = null;
                            });
                            $table.find(&#39;th&#39;).removeClass(&#39;sorted-asc&#39;).removeClass(&#39;sorted-desc&#39;);
                            var $sortHead = $table.find(&#39;th&#39;).filter(&#39;:nth-child(&#39; + (column + 1) + &#39;)&#39;);
                            //实现反向排序
                            if (newDirection == 1) {
                                $sortHead.addClass(&#39;sorted-asc&#39;);
                            } else {
                                $sortHead.addClass(&#39;sorted-desc&#39;);
                            }
                            //调用隔行变色的函数
                            $table.alternateRowColors($table);
                            //移除已排序的列的样式,添加样式到当前列
                            $table.find(&#39;td&#39;).removeClass(&#39;sorted&#39;).filter(&#39;:nth-child(&#39; + (column + 1) + &#39;)&#39;).addClass(&#39;sorted&#39;);
                            $table.trigger(&#39;repaginate&#39;);
                        });
                    }
                });
            });
        });
        //分页
        $(function() {
            $(&#39;table.paginated&#39;).each(function() {
                var currentPage = 0;
                var numPerPage = 10;
                var $table = $(this);
                $table.bind(&#39;repaginate&#39;, function() {
                    $table.find(&#39;tbody tr&#39;).hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
                });
                var numRows = $table.find(&#39;tbody tr&#39;).length;
                var numPages = Math.ceil(numRows / numPerPage);
                var $pager = $(&#39;<p class="pager"></p>&#39;);
                for (var page = 0; page < numPages; page++) {
                    $(&#39;<span class="page-number"></span>&#39;).text(page + 1)
                     .bind(&#39;click&#39;, { newPage: page }, function(event) {
                         currentPage = event.data[&#39;newPage&#39;];
                         $table.trigger(&#39;repaginate&#39;);
                         $(this).addClass(&#39;active&#39;).siblings().removeClass(&#39;active&#39;);
                     }).appendTo($pager).addClass(&#39;clickable&#39;);
                }
                $pager.insertBefore($table);
                $table.trigger(&#39;repaginate&#39;);
                $pager.find(&#39;span.page-number:first&#39;).addClass(&#39;active&#39;);
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <p>
        <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>
    </p>
    </form>
</body>
</html>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jquery动态操作表格行的方法（附代码）

JS点击小图片关联显示大图片

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment exploiter dynamiquement les lignes d'un tableau avec jquery (avec code)Article suivant：Comment exploiter dynamiquement les lignes d'un tableau avec jquery (avec code)

Articles Liés

Voir plus