0

以下に示すように、jQueryでテーブルをソートするコードがいくつかあります。

   $(document).ready(function() {
        //grab all header rows
        $('thead th').each(function(column){
            $(this).addClass('sortable').click(function() {
                var findSortKey = function($cell) {
                    return $cell.find('.sort-key').text().toUpperCase()
                    + ' ' + $cell.text().toUpperCase();
                };

                var sortDirection = $(this).is('.sorted-asc') ? -1 : 1;

                //step back up tree and get the rows with data
                //for sorting
                var $rows = $(this).parent().parent().parent().find('tbody tr').get();

                //loop through all the rows and find
                $.each($rows, function(index, row) {
                    row.sortKey = findSortKey($(row).children('td').eq(column));
                });

                //compare and sort the rows alphabetically or numerically
                $rows.sort(function(a, b) {
                    if (a.sortKey.indexOf('-') == -1){
                        if (parseInt(a.sortKey) < parseInt(b.sortKey)) {
                            return -sortDirection;
                        }
                        if (parseInt(a.sortKey) > parseInt(b.sortKey)) {
                            return sortDirection;
                        }
                    } else {

                        if (a.sortKey < b.sortKey) {
                            return -sortDirection;
                        }
                         if (a.sortKey > b.sortKey) {
                            return sortDirection;
                        }
                    }

                    return 0;
                });

                //add the rows in the correct order to the bottom of the table
                $.each($rows, function(index, row) {
                    $('tbody').append(row);
                    row.sortKey = null;
                });

                //identify the column sort order
                $('th').removeClass('sorted-asc sorted-desc');
                var $sortHead = $('th').filter(':nth-child(' + (column + 1) + ')');
                sortDirection == 1 ? $sortHead.addClass('sorted-asc') : $sortHead.addClass('sorted-desc');

                // identify the column to be sorted by
                $('td').removeClass('sorted').filter(':nth-child(' + (column + 1) + ')').addClass('sorted');

                //$('.visible td').removeClass('odd');
                //zebraRows('.vi')
            });
        });
    });

また、css

root { 
    display: block;
}

th.sortable {
    color: #666;
    cursor: pointer;
    text-decoration: underline;

}
th.sortable:hover{color:black;}
th.sorted-asc, th.sorted-desc { color:black;
          background-color: cadetblue;
}

これは 1 つのテーブルでは機能しますが、複数のテーブルでは機能しません。テーブルがネストされているdivのIDに基づいてこれを行う方法はありますか?

4

2 に答える 2

1

事前にパッケージ化されたソリューションが必要な場合は、過去に sortable.js を使用しました。リンクは次のとおりです。 http://www.kryogenix.org/code/browser/sorttable/

実装はとても簡単です。

于 2012-07-24T02:21:02.867 に答える
0

一部のセレクターは、問題のテーブルに固有にする必要があります。

進歩的な改善によって、私は次のことに到達します：

$(document).ready(function() {
    function findSortKey($cell) {
        return $cell.find('.sort-key').text().toUpperCase() + ' ' + $cell.text().toUpperCase();
    };
    function sortFn(a, b) {
        if (a.sortKey.indexOf('-') == -1) {
            return parseInt(a.sortKey, 10) - parseInt(b.sortKey, 10);
        } else {
            return a.sortKey - b.sortKey;
        }
    }
    $('thead th').each(function(column) {
        $(this).addClass('sortable').click(function() {
            var $th = $(this);
            var sortDirection = $th.is('.sorted-asc') ? -1 : 1;
            var $tbody = $th.closest('table').children('tbody');
            var rows = $tbody.children('tr').get();
            $.each(rows, function(index, row) {
                row.sortKey = findSortKey($(row).children('td').eq(column));
            });
            rows.sort(function(a, b) {
                if(sortDirection == 1) { return sortFn(a, b); }//sort asc.
                else { return sortFn(b, a); }//reverse a and b to sort desc.
            });
            $.each(rows, function(index, row) {
                $tbody.append(row);
                row.sortKey = null;//??
            });
            var filterSelector = ':nth-child(' + (column + 1) + ')';
            $th.removeClass('sorted-asc sorted-desc').filter(filterSelector).addClass( (sortDirection == 1) ? 'sorted-asc' : 'sorted-desc' );
            $tbody.children('td').removeClass('sorted').filter(filterSelector).addClass('sorted');
        });
    });
});

テストされていないため、デバッグが必要になる場合があります

セレクターの修正とは別に、最も重要な変更は、外側のeach()ループの外側にいくつかの関数をプルし、ソート関数を単純化することです。

于 2012-07-24T02:07:25.913 に答える