jquery 实现表格排序

$(document).ready(function()
{    
    //插件的形式
    jQuery.fn.alterRowColors = function()
    {
        $('tbody tr:odd', this).removeClass('even').addClass('odd');
        $('tbody tr:even', this).removeClass('odd').addClass('even');
        return this;
    }
    //1.此时的函数是作为jQuery.fn的一个新属性定义的，不是孤立的函数，这样就把该函数注册成了一个插件，
    //2.使用关键字this，在一个插件内部，this表示的是调用该插件的jQuery对象，
    //3.最后在函数的末尾返回this,返回这个值可以使这个新方法能够继续连缀其他的方法。
    
    var $sortOrder = 0;   //排序类型 1表示升序，0表示降序
    var $table = $('table#shop');

    $table.alterRowColors();

    $('th', $table).each(function( column )
    {
        //处理三种有可能存在的排序字段，比较方法
        var findSortKey;
        if( $(this).is('.sort-title') || $(this).is('.sort-author') )
        {
            findSortKey = function( $cell )
            {
                return $cell.find('.sort-title').text().toUpperCase()+ '' +$cell.text().toUpperCase();
            }
        }
        else if( $(this).is('.sort-date') )
        {
            findSortKey = function( $cell )
            {
                return Date.parse('1' + $cell.text());
            }
        }
        else if( $(this).is('.sort-price') )
        {
            findSortKey = function( $cell )
            {
                var key =  parseFloat($cell.text().replace(/^[^/d.]*/, ''))
                return isNaN(key) ? 0 : key;
            }
        }
        
        //排序
        if( findSortKey )
        {
            $(this).addClass('clickable').hover(function()
            {
                $(this).addClass('hover');
                var $title = $sortOrder == 0 ? '升序' : '降序';
                $(this).attr('title', '按'+  $(this).html() + $title +'排列');
            }, function()
            {
                $(this).removeClass('hover');
            }).click(function()
            {
                $sortOrder = $sortOrder == 0 ? 1 : 0;
                
                var rows = $table.find('tbody > tr').get();
               
                $.each( rows, function( index, row )
                {
                    row.sortKey = findSortKey($(row).children('td').eq(column));
                });
                //排序方法
                rows.sort(function( a, b )
                {
                    if( $sortOrder == 1 )
                    {
                        //升序
                        if(a.sortKey < b.sortKey)   return -1;
                        if(a.sortKey > b.sortKey)   return  1;                    
                        return 0;
                    }
                    else
                    {
                        //降序
                        if(a.sortKey < b.sortKey)   return  1;
                        if(a.sortKey > b.sortKey)   return -1;                    
                        return 0;
                    }                    
                });
                //排序后的对象添加给$table
                $.each( rows, function( index, row )
                {
                    $table.children('tbody').append(row);
                    row.sortKey = null;
                });
                
                //显著标明是通过某一列排序的
                $table.find('td').removeClass('sorted')
                    .filter(':nth-child('+ (column + 1) +')').addClass('sorted');
                    
                //重新赋予奇偶行的样式
                $table.alterRowColors();
            });
        }  
    });
    
    //分页效果
    var currentPage = 0;  //当前页
    var pageSize = 10;  //每页行数（不包括表头）
    //绑定分页事件
    $table.bind('repaginate', function()
    {
        $table.find('tbody tr').hide()
            .slice(currentPage * pageSize, (currentPage + 1) * pageSize).show();
    });

    var numRows = $table.find('tbody tr').length;  //记录宗条数
    var numPages = Math.ceil(numRows/pageSize);    //总页数
    
    var $pager = $('<div class="page"></div>');  //分页div
    for( var page = 0; page < numPages; page++ )
    {
        //为分页标签加上链接
        $('<a href="#" ><span>'+ (page+1) +'</span></a>')
            .bind("click", { "newPage": page }, function(event) 
            {           
                currentPage = event.data["newPage"];                  
                $table.trigger("repaginate");             
            })
           .appendTo($pager); 
         
        $pager.append("  ");
    }
    $pager.insertAfter($table);    //分页div插入table
    
    $table.trigger("repaginate");  //初始化    
    
});