最近我遇到问题，就是控制table表格的行不要太长，这里最简单方便的方法就是用前端分页，控制表格显示的行数，在网上找了一番，终于找到一个比较合适的前端分页代码。示例如下：

html代码：

//全局变量

var numCount; //数据总数量

var columnsCounts; //数据列数量

var pageCount; //每页显示的数量

var pageNum; //总页数

var currPageNum ; //当前页数

//页面标签变量

var blockTable;

var preSpan;

var firstSpan;

var nextSpan;

var lastSpan;

var pageNumSpan;

var currPageSpan;

window.οnlοad=function(){

//页面标签变量

blockTable = document.getElementById("blocks");

preSpan = document.getElementById("spanPre");

firstSpan = document.getElementById("spanFirst");

nextSpan = document.getElementById("spanNext");

lastSpan = document.getElementById("spanLast");

pageNumSpan = document.getElementById("spanTotalPage");

currPageSpan = document.getElementById("spanPageNum");

numCount = document.getElementById("blocks").rows.length - 1; //取table的行数作为数据总数量(减去标题行1)

alert(numCount);

columnsCounts = blockTable.rows[0].cells.length;

pageCount = 5;

pageNum = parseInt(numCount/pageCount);

if(0 != numCount%pageCount){

pageNum += 1;

}

firstPage();

};

main.css代码：

body {

}

table .table-striped {

}

table th {

text-align: left;

height: 30px;

background: #deeeee;

padding: 5px;

margin: 0;

border: 0px;

}

table td {

text-align: left;

height: 30px;

margin: 0;

padding: 5px;

border: 0px

}

table tr:hover {

background: #eeeeee;

}

.span6 {

/*width:500px;*/

float: inherit;

margin: 10px;

}

#pagiDiv span {

background: #1e90ff;

border-radius: .2em;

padding: 5px;

}

pagination.js 的代码：

function firstPage() {

hide();

currPageNum = 1;

showCurrPage(currPageNum);

showTotalPage();

for (i = 1; i < pageCount + 1; i++) {

blockTable.rows[i].style.display = "";

}

firstText();

preText();

nextLink();

lastLink();

}

function prePage() {

hide();

currPageNum--;

showCurrPage(currPageNum);

showTotalPage();

var firstR = firstRow(currPageNum);

var lastR = lastRow(firstR);

for (i = firstR; i < lastR; i++) {

blockTable.rows[i].style.display = "";

}

if (1 == currPageNum) {

firstText();

preText();

nextLink();

lastLink();

} else if (pageNum == currPageNum) {

preLink();

firstLink();

nextText();

lastText();

} else {

firstLink();

preLink();

nextLink();

lastLink();

}

}

function nextPage() {

hide();

currPageNum++;

showCurrPage(currPageNum);

showTotalPage();

var firstR = firstRow(currPageNum);

var lastR = lastRow(firstR);

for (i = firstR; i < lastR; i++) {

blockTable.rows[i].style.display = "";

}

if (1 == currPageNum) {

firstText();

preText();

nextLink();

lastLink();

} else if (pageNum == currPageNum) {

preLink();

firstLink();

nextText();

lastText();

} else {

firstLink();

preLink();

nextLink();

lastLink();

}

}

function lastPage() {

hide();

currPageNum = pageNum;

showCurrPage(currPageNum);

showTotalPage();

var firstR = firstRow(currPageNum);

for (i = firstR; i < numCount + 1; i++) {

blockTable.rows[i].style.display = "";

}

firstLink();

preLink();

nextText();

lastText();

}

// 计算将要显示的页面的首行和尾行

function firstRow(currPageNum) {

return pageCount * (currPageNum - 1) + 1;

}

function lastRow(firstRow) {

var lastRow = firstRow + pageCount;

if (lastRow > numCount + 1) {

lastRow = numCount + 1;

}

return lastRow;

}

function showCurrPage(cpn) {

currPageSpan.innerHTML = cpn;

}

function showTotalPage() {

pageNumSpan.innerHTML = pageNum;

}

//隐藏所有行

function hide() {

for (var i = 1; i < numCount + 1; i++) {

blockTable.rows[i].style.display = "none";

}

}

//控制首页等功能的显示与不显示

function firstLink() {

firstSpan.innerHTML = "第1页";

}

function firstText() {

firstSpan.innerHTML = "第1页";

}

function preLink() {

preSpan.innerHTML = "前1页";

}

function preText() {

preSpan.innerHTML = "前1页";

}

function nextLink() {

nextSpan.innerHTML = "下1页";

}

function nextText() {

nextSpan.innerHTML = "下1页";

}

function lastLink() {

lastSpan.innerHTML = "最后1页";

}

function lastText() {

lastSpan.innerHTML = "最后1页";

}

好好研究这里的代码，就能解决实际的问题。