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;
}

这适用于一张桌子，但不适用于多张桌子。有没有什么办法可以根据表格嵌套的 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 回答