主要是借鉴了网上一个例子，修改了一些小地方，前端分页的技巧，表格的数据是已经写好了，可以前端渲染表格然后再分页，都是可以的。
其实分页最关键是这两句：
var startRow = (currentPage - 1) * pageSize+1 //currentPage 为当前页，pageSize为每页显示的数据量
var endRow = currentPage * pageSize
找到我们需要显示的行的范围（starRow~endRow）
ps:这里在跳转的时候遇到了一个小BUG，就是获取到的select的value值是string类型的，比如获取到了1，然后你想再加1的时候就会变成"11" 而不是我们想要的"2"，所以这里需要用parseInt( )来转换一下，小细节需要注意呀！！！
效果图：
[javascript] view plain copy print?
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<style type="text/css">
a{
text-decoration: none
}
.table2{
border:#C8C8C8 solid
border-width:1px 0px 0px 1px
background: #F3F0F0
margin-top:25px
}
.td0{
border:#C8C8C8 solid
border-width:0 0 1px 0
}
.td2{
border:#C8C8C8 solid
border-width:0 1px 1px 0
}
.barcon {
width: 1000px
margin: 0 auto
text-align: center
}
.barcon1 {
font-size: 17px
float: left
margin-top: 20px
}
.barcon2 {
float: right
}
.barcon2 ul {
margin: 20px 0
padding-left: 0
list-style: none
text-align: center
}
.barcon2 li {
display: inline
}
.barcon2 a {
font-size: 16px
font-weight: normal
display: inline-block
padding: 5px
padding-top: 0
color: black
border: 1px solid #ddd
background-color: #fff
}
.barcon2 a:hover{
background-color: #eee
}
.ban {
opacity: .4
}
</style>
</head>
<body>
<table width="950" cellpadding="0" cellspacing="0" class="table2" align="center">
<thead>
<tr>
<td colspan="3" height="33" class="td0"> </td>
<td align="center" class="td2"><a href="###">添加用户</a></td>
</tr>
<tr align="center">
<th width="150" height="33" class="td2">序号</th>
<th width="300" class="td2">用户名</th>
<th width="250" class="td2">权限</th>
<th width="250" class="td2">操作</th>
</tr>
</thead>
<tbody id="adminTbody">
<tr align="center">
<td class="td2" height="33" width="150">1</td>
<td class="td2" >admin</td>
<td class="td2" >管理员</td>
<td class="td2" ><a href="###">修改</a></td>
</tr>
</tbody>
</table>
<div id="barcon" class="barcon" >
<div id="barcon1" class="barcon1"></div>
<div id="barcon2" class="barcon2">
<ul>
<li><a href="###" id="firstPage">首页</a></li>
<li><a href="###" id="prePage">上一页</a></li>
<li><a href="###" id="nextPage">下一页</a></li>
<li><a href="###" id="lastPage">尾页</a></li>
<li><select id="jumpWhere">
</select></li>
<li><a href="###" id="jumpPage" onclick="jumpPage()">跳转</a></li>
</ul>
</div>
</div>
<script src="jquery.js"></script>
<script>
/*动态生成用户函数
num为生成的用户数量
*/
function dynamicAddUser(num){
for(var i=1i<=numi++)
{
var trNode=document.createElement("tr")
$(trNode).attr("align","center")
//序号
var tdNodeNum=document.createElement("td")
$(tdNodeNum).html(i+1)
tdNodeNum.style.width = "150px"
tdNodeNum.style.height = "33px"
tdNodeNum.className = "td2"
//用户名
var tdNodeName=document.createElement("td")
$(tdNodeName).html("lzj"+i)
tdNodeName.style.width = "300px"
tdNodeName.className = "td2"
//权限
var tdNodePri=document.createElement("td")
tdNodePri.style.width = "250px"
tdNodePri.className = "td2"
var priText=document.createElement("span")
$(priText).css({"display":"inline-block","text-align":"center"})
$(priText).text("普通用户")
tdNodePri.appendChild(priText)
//操作
var tdNodeOper = document.createElement("td")
tdNodeOper.style.width = "170px"
tdNodeOper.className = "td2"
var editA = document.createElement("a")
$(editA).attr("href", "###").text("编辑")
$(editA).css({ display: "inline-block" })
tdNodeOper.appendChild(editA)
trNode.appendChild(tdNodeNum)
trNode.appendChild(tdNodeName)
trNode.appendChild(tdNodePri)
trNode.appendChild(tdNodeOper)
$("#adminTbody")[0].appendChild(trNode)
}
}
$(function(){
dynamicAddUser(80)
goPage(1,10)
var tempOption=""
for(var i=1i<=totalPagei++)
{
tempOption+='<option value='+i+'>'+i+'</option>'
}
$("#jumpWhere").html(tempOption)
})
/**
* 分页函数
* pno--页数
* psize--每页显示记录数
* 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
* 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
**/
var pageSize=0//每页显示行数
var currentPage_=1//当前页全局变量，用于跳转时判断是否在相同页，在就不跳，否则跳转。
var totalPage//总页数
function goPage(pno,psize){
var itable = document.getElementById("adminTbody")
var num = itable.rows.length//表格所有行数(所有记录数)
pageSize = psize//每页显示行数
//总共分几页
if(num/pageSize > parseInt(num/pageSize)){
totalPage=parseInt(num/pageSize)+1
}else{
totalPage=parseInt(num/pageSize)
}
var currentPage = pno//当前页数
currentPage_=currentPage
var startRow = (currentPage - 1) * pageSize+1
var endRow = currentPage * pageSize
endRow = (endRow > num)? num : endRow
//遍历显示数据实现分页
/*for(var i=1i<(num+1)i++){
var irow = itable.rows[i-1]
if(i>=startRow && i<=endRow){
irow.style.display = ""
}else{
irow.style.display = "none"
}
}*/
$("#adminTbody tr").hide()
for(var i=startRow-1i<endRowi++)
{
$("#adminTbody tr").eq(i).show()
}
var tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页"
document.getElementById("barcon1").innerHTML = tempStr
if(currentPage>1){
$("#firstPage").on("click",function(){
goPage(1,psize)
}).removeClass("ban")
$("#prePage").on("click",function(){
goPage(currentPage-1,psize)
}).removeClass("ban")
}else{
$("#firstPage").off("click").addClass("ban")
$("#prePage").off("click").addClass("ban")
}
if(currentPage<totalPage){
$("#nextPage").on("click",function(){
goPage(currentPage+1,psize)
}).removeClass("ban")
$("#lastPage").on("click",function(){
goPage(totalPage,psize)
}).removeClass("ban")
}else{
$("#nextPage").off("click").addClass("ban")
$("#lastPage").off("click").addClass("ban")
}
$("#jumpWhere").val(currentPage)
}
function jumpPage()
{
var num=parseInt($("#jumpWhere").val())
if(num!=currentPage_)
{
goPage(num,pageSize)
}
}
</script>
</body>
</html>
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>分页</title>
<style type="text/css">
.grid {
width: 400px
}
.table {
width: 100%
text-align: center
border: outset #efefef
border-width: 1px 0px 0px 1px
}
.table th, td {
line-height: 30px
border: solid #efefef
border-width: 0px 1px 1px 0px
}
.table tr {
width: 100%
margin: 0 auto
border: none
overflow: hidden
color: #2981e4
font: normal 12px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans
}
.no-content {
text-align: center
line-height: 36px
color: red
font: normal 16px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans
}
.pager {
padding-top:20px
text-align: right
line-height: 36px
color: blue
font: normal 12px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans
}
.button, .button:visited {
background-color: #EFEFEF
border: 1px solid #d5d5d5
background: #fff
padding: 2px 6px
margin: 2px
text-decoration: none
cursor: pointer
}
.button:hover {
background-color: #2575cf
color: #fff
}
.button:active {
top: 1px
}
.no-page {
background-color: #EFEFEF
cursor: default
}
.pager input[type='text'] {
width: 20px
color: #333
padding: 4px 5px
border: 1px solid #e0ecff
border-radius: 2px
-o-border-radius: 2px
-moz-border-radius: 2px
-wekit-border-radius: 2px
box-shadow: 0 0 0 2px rgba(255,255, 255, 0.2)
-o-box-shadow: 0 0 0 2px rgba(255,255, 255, 0.2)
-webkit-box-shadow: 0 0 0 2px rgba(255,255, 255, 0.2)
-moz-box-shadow: 0 0 0 2px rgba(255,255, 255, 0.2)
behavior: url(/PIE.htc)
}
.pager input[type='text']:focus, .table input[type='text']:hover {
border: 1px solid #3aa2d0
outline: none
}
</style>
</head>
<body>
<div class="grid">
<div id="content">
</div>
<div id="pager">
</div>
</div>
</body>
</html>
<script type="text/javascript">
var jsonData = []
//生成静态数据
function getJsonData(size) {
var datas = []
for (var idx = 0 idx < size idx++) {
datas.push({
account : "Account_" + idx,
userName : "用户_" + idx,
gender : (idx % 2 == 1 ? "男" : "女 "),
salary : parseInt(Math.random(idx % 50) * 10000) + 5000
})
}
return datas
}
//获取当前页数据
function query(cur, size) {
var begin = (cur - 1) * size
var end = cur * size
return jsonData.slice(begin, end)
}
window.onload = function() {
//获取JSON数据
jsonData = getJsonData(555)
//加载数据
pageTo(10, 1)
}
//加载表格
function pageTo(pageSize, curPage) {
var dataSize = jsonData.length
if (dataSize == 0) {
content.innerHTML = "<span class='no-content'>没有查询到任何数据！</span>"
return
}
var totalPage = Math.ceil(dataSize / pageSize)
//table
var datas = query(curPage, pageSize)
var html = "<h3>员工信息表</h3><table class='table'>"
for (var index = 0 index < datas.length index++) {
var data = datas[index]
html = html + "<tr>"
html = html + "<td>" + (data.account || '') + "</td>"
html = html + "<td>" + (data.userName || '') + "</td>"
html = html + "<td>" + (data.gender || '') + "</td>"
html = html + "<td>" + (data.salary || '') + "</td>"
html = html + "</tr>"
}
html = html + "</table>"
content.innerHTML = html
//pager
var phtml = "<div class='pager'>"
if (curPage == 1) {
phtml = phtml + "<a href='#' class='button no-page'>上一页</a>"
} else {
phtml = phtml + "<a href='#' class='button' onclick='pageTo(" + pageSize + ", " + (curPage - 1) + ")'>上一页</a>"
}
phtml = phtml + "<input type='text' value='" + curPage + "' onkeypress='goto(this, " + pageSize+ ")'>"
if (curPage == totalPage) {
phtml = phtml + "<a href='#' class='button no-page'>下一页</a>"
} else {
phtml = phtml + "<a href='#' class='button' onclick='pageTo(" + pageSize + ", " + (curPage + 1) + ")'>下一页</a>"
}
phtml = phtml + " 共" + totalPage + "页," + dataSize + "条记录</div>"
pager.innerHTML = phtml
}
//回车跳转，注意控制输入数字：此处未处理
function goto(obj, pageSize){
if(event.keyCode==13){
pageTo(pageSize, parseInt(obj.value))
}
}
</script>
大体思路如上
原则上像这样的功能，应该直接在asp中完成，而不是在前端通过js来实现，这纯属脱裤子放屁。
下面是修改后的代码，不再需要js：
<i id="pronumber"><%for i = 1 to n%><a href="<%=filename%>?page=<%=i%>&<%=url%>"><span<%if i=int(request("page")) then%>style="background:redcolor:#fff"<%end if%>><%=i%></span></a><%next%></i>
另外，html标签的id是具有唯一性的，也就是说每个标签的id是不能相同的。如果出现相同，那么只有第一个才能被js找到。你的这些span都用了相同的id，所以样式始终被匹配到第一个span中。这就是你的代码的错误所在。此种情况应该用class而不是用id，class（类）是允许重复的。
