コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > jqueryはテーブルのローカルソート機能を作成します

jqueryはテーブルのローカルソート機能を作成します

php中世界最好的语言
リリース： 2018-04-26 09:17:45
オリジナル
1077 人が閲覧しました

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

以上がjqueryはテーブルのローカルソート機能を作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
jquery 選別 地元
ソース：php.cn
前の記事：jqueryでテーブルの行を動的に操作する方法（コード付き） 次の記事：jqueryでテーブルソート＋リアルタイム検索機能を実装
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
jqueryを使用してHTMLデータテーブルの選択されていない行の値を取得する方法 ボタンがクリックされなかったすべての行の値を取得しようとしています。たとえば、最初の行のボタンをクリックしたときに、クリックされなかった行の値を取得したいとします。 vartabl...
から 2024-04-05 09:26:49
0
1
1418
エンドユーザーの現在の選択に基づいて選択ボックスから選択したオプションを移動するには、jquery スクリプトが必要です エンドユーザーが選択ボックス要素を介してアイテムをランク付けできる HTML ページがあります。簡単なデモを確認するには、フィドルを参照してください: https://jsfidd...
から 2024-04-04 18:40:04
0
1
3528
ブックマークを介して純粋な CSS で要素を作成しました。作成されたが表示されない 私のコードは次のとおりです: g=document.createElement('div');g.setAttribute("id","divcont...
から 2024-04-04 17:27:27
0
1
417
Safari/Firefox iOS でフォ​​ームデータを送信できない これは、iOS 上の Safari/Firefox を除くすべてのプラットフォームで動作します: jQuery("#gform_1").one('submit'...
から 2024-04-04 12:53:48
0
1
303
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート