Question

用jquery实现表格列排序？

Answer 1

$(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"); //初始化

});