html table假分页

直接上代码，没什么技术含量,在网上找了下修改所得

<div class="form-con-footer">
	<div class="form-con-pages">
		<ul>
			<li><span id="spanFirst" href="#" class="page-first-gray"></span></li>
			<li><span id="spanPre" href="#" class="page-before-gray"></span></li>
			<li>第<span id="spanPageNum"></span>/<span id="spanTotalPage"></span>页, 转至<span id="selectPage"></span></li>
			<li><span id="spanNext" href="#" class="page-next"></span></li>
			<li><span id="spanLast" href="#" class="page-last"></span></li>
		</ul>
	</div>
	<div class="right">
                  <p>共查询到记录<span id="totalNum"></span>条  |  每页  <select><option>10</option></select>  条记录</p>
         </div>
</div>

// 获取各个控件的值
var theTable = document.getElementById("deviceTable");
// 总页数
var totalPage = document.getElementById("spanTotalPage");
// 页码
var pageNum = document.getElementById("spanPageNum");
// 上一页
var spanPre = document.getElementById("spanPre");
// 下一页
var spanNext = document.getElementById("spanNext");
// 第一页
var spanFirst = document.getElementById("spanFirst");
// 最后一页
var spanLast = document.getElementById("spanLast");

var selectPage = document.getElementById("selectPage");

var nowNum = document.getElementById("nowNum");

var totalNum = document.getElementById("totalNum");

// 获取表格的行数
var numberRowsInTable = theTable.rows.length;
// 页面显示记录条数
var pageSize = 10;
// 
var page = 1;

// 下一页
function next() {

	// 隐藏表格
	hideTable();

	// 当前行数=页面大小*页码
	currentRow = pageSize * page;

	// 表头算一行，所以要+1
	currentRow += 1;

	// 最大行数=当前行数+页面大小
	maxRow = currentRow + pageSize;
	// 如果最大行数比表格行数大，最大行数为表格行数
	if (maxRow > numberRowsInTable)
		maxRow = numberRowsInTable;
	//
	for (var i = currentRow; i < maxRow; i++) {
		theTable.rows[i].style.display = '';
	}
	// 页码加一，到下一页
	page++;

	// 最后一页
	if (maxRow == numberRowsInTable) {
		nextText();
		lastText();
	}
	
	$("#pageSelector").val(page);
	
	showPage();
	preLink();
	firstLink();
}

// 上一页
function pre() {

	hideTable();

	page--;

	currentRow = pageSize * page;

	currentRow += 1;

	maxRow = currentRow - pageSize;
	if (currentRow > numberRowsInTable)
		currentRow = numberRowsInTable;
	for (var i = maxRow; i < currentRow; i++) {
		theTable.rows[i].style.display = '';
	}

	if (maxRow == 1) {
		preText();
		firstText();
	}
	$("#pageSelector").val(page);
	
	showPage();
	nextLink();
	lastLink();
}

// 第一页
function first() {
	hideTable();
	page = 1;
	for (var i = 1; i <= pageSize; i++) {
		theTable.rows[i].style.display = '';
	}
	$("#pageSelector").val(page);
	showPage();
	preText();
	nextLink();
	lastLink();
	firstText();
}

// 最后一页
function last() {
	hideTable();
	page = pageCount();
	currentRow = pageSize * (page - 1);

	currentRow += 1;

	for (var i = currentRow; i < numberRowsInTable; i++) {
		theTable.rows[i].style.display = '';
	}
	$("#pageSelector").val(page);
	showPage();
	preLink();
	nextText();
	firstLink();
	lastText();
}

// 表头不能隐藏
// 隐藏表格
function hideTable() {
	for (var i = 1; i < numberRowsInTable; i++) {
		theTable.rows[i].style.display = 'none';
	}
}

// 显示页
function showPage() {
	pageNum.innerHTML = page;
}

// 总共页数
function pageCount() {
	var count = 0;
	if (numberRowsInTable % pageSize != 0)
		count = 1;
	return parseInt(numberRowsInTable / pageSize) + count;
}


function selectOption() {
	var pCount = totalPage.innerHTML;
	var html = "<select id='pageSelector' onChange='optionClick(this.value)'>"
	for (var i = 1; i <= pCount; i++) {
		if (i == page) {
			html += "<option selected='selected'>" + i + "</option>";
		} else {
			html += "<option>" + i + "</option>";
		}
	}
	html += "</select>";
	return html;
}

function optionClick(value){
	hideTable();
	page = value;
	currentRow = pageSize * page;
	currentRow += 1;
	
	maxRow = currentRow - pageSize;
	if (currentRow > numberRowsInTable)
		currentRow = numberRowsInTable;
		
	for (var i = maxRow; i < currentRow; i++) {
		theTable.rows[i].style.display = '';
	}
	
	showPage();
	preLink();
	nextLink();
	firstLink();
	lastLink();
	
	// 最后一页
	if (currentRow == numberRowsInTable) {
		nextText();
		lastText();
	}else if (maxRow == 1) {
		preText();
		firstText();
	}
	

}

// 显示链接
function preLink() {
	spanPre.innerHTML = "<a href='javascript:pre();' class='page-before'></a>";
}
function preText() {
	spanPre.innerHTML = "<a href='#' class='page-before-gray'></a>";
}

function nextLink() {
	spanNext.innerHTML = "<a href='javascript:next();' class='page-next'></a>";
}
function nextText() {
	spanNext.innerHTML = "<a href='#' class='page-next-gray'></a>";
}

function firstLink() {
	spanFirst.innerHTML = "<a href='javascript:first();' class='page-first'></a>";
}
function firstText() {
	spanFirst.innerHTML = "<a href='#' class='page-first-gray'></a>";
}

function lastLink() {
	spanLast.innerHTML = "<a href='javascript:last();' class='page-last'></a>";
}
function lastText() {
	spanLast.innerHTML = "<a href='#' class='page-last-gray'></a>";
}

// 隐藏表格
function hide() {
	for (var i = pageSize + 1; i < numberRowsInTable; i++) {
		theTable.rows[i].style.display = 'none';
	}
	totalPage.innerHTML = pageCount();
	pageNum.innerHTML = '1';
	totalNum.innerHTML = numberRowsInTable-1;
	selectPage.innerHTML = selectOption();
	
	if(pageSize>=numberRowsInTable){
		nextText();
		lastText();
	}else{
		nextLink();
		lastLink();
	}
	
	preText();
	firstText();
}
hide();