基于jQuery的表格排序与颜色交替显示, 最近项目中用到页面端js分页,自己写的一个实例, 拿来与大家分享下, 献丑了！

?

//	以下为表格分页代码
var currentPage;			// 当前页
var numPerPage = 4;			// 每页显示记录条数
var $table = null;			// table对象
var maxPages = 0;			// 总页数

function repaginate (pageNo) {
	if($table != null && (pageNo > 0 && pageNo <= maxPages)) {
		currentPage = pageNo;
		$table.find('tbody tr').hide()
			  .slice((pageNo - 1) * numPerPage, pageNo * numPerPage).show();
	}
}

$(document).ready(function() {
	$('table.paginated').each(function() {
		$table = $(this);
		maxPages = Math.ceil($table.find('tbody tr').length / numPerPage);				//	计算总页数, 总记录条数/每页显示记录条数
		repaginate(1);							//	初始化, 显示第一页
	});

	$('#first').click(function() {				//	首页
		repaginate(1);
	});
	$('#previous').click(function() {			//	上一页
		repaginate(currentPage-1);
	});
	$('#next').click(function() {				//	下一页
		repaginate(currentPage+1);
	});
	$('#last').click(function() {				//	尾页
		repaginate(maxPages);
	});
});

// 以下为表格样式显示代码
$(document).ready(function() {
	$table.alternateRowsColor();

	$('tbody.body tr:odd').hover(function() {
		$(this).removeClass('odd').addClass('hover'); 
	}, function() {
		$(this).removeClass('hover').addClass('odd');
	});

	$('tbody.body tr:even').hover(function() {
		$(this).removeClass('even').addClass('hover');  
	}, function() {
		$(this).removeClass('hover').addClass('even');
	});
});

jQuery.fn.alternateRowsColor = function() {
	$('tbody.body tr:odd', this).removeClass('even').addClass('odd');
	$('tbody.body tr:even', this).removeClass('odd').addClass('even');
}

?显示效果图:

具体实例见附件。