简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  jquery ermöglicht die lokale Sortierung von Tabellen

jquery ermöglicht die lokale Sortierung von Tabellen

php中世界最好的语言
php中世界最好的语言Original
2018-04-26 09:17:451020Durchsuche

这次给大家带来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点击小图片关联显示大图片

Das obige ist der detaillierte Inhalt vonjquery ermöglicht die lokale Sortierung von Tabellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So bedienen Sie Tabellenzeilen dynamisch mit jquery (mit Code)Nächster Artikel：So bedienen Sie Tabellenzeilen dynamisch mit jquery (mit Code)

In Verbindung stehende Artikel

Mehr sehen