假分页
之前不知道何为假分页，直到昨天遇到这样一个问题：跨域请求后返回一个数据集，想把这些数据做分页处理，但没有sql语句，故查资料发现有假分页。所谓假分页就是一次性从数据库里查询出所有数据，然后控制自己想要显示的效果，而不像真分页那样每页显示的数据都从数据库里读。我是用js控制的：这里贴个小例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <table border="1" cellpadding="0" cellspacing="0" bordercolor="#e4e4e4" style="border-collapse:collapse;"align="center" width="720"> <Tr STYLE="background: #F8F8F8;"> <Td width="120" align="center" height="25" class="bd_right bd_bottom"><strong>交易日期</strong></Td> <Td width="120" align="center" height="25" class="bd_right bd_bottom"><strong>交易时间</strong></Td> <Td width="120" align="center" height="25" class="bd_right bd_bottom"><strong>交易类型</strong></Td> <Td width="120" align="center" height="25" class="bd_right bd_bottom"><strong>交易状态</strong></Td> <Td width="120" align="center" height="25" class="bd_right bd_bottom"><strong>商户名称</strong></Td> <Td width="120" align="center" height="25" class="bd_bottom"><strong>交易金额</strong></Td> </Tr> <Tr> <Td align="center" colspan="6"> <table border="0" id="www_zzjs_net" cellspacing="0" bordercolor="#e4e4e4" style="border-collapse:collapse;"align="center" width="720"> <Tr> <Td width="120" align="center" height="25" class="bd_right bd_bottom">1</Td> <Td width="120" align="center" height="25" class="bd_right bd_bottom">32123</Td> <Td width="120" align="center" height="25" class="bd_right bd_bottom">321</Td> <Td width="120" align="center" height="25" class="bd_right bd_bottom">332></Td> <Td width="120" align="center" height="25" class="bd_right bd_bottom">32132</Td> <Td width="120" align="center" height="25" class="bd_bottom">32132</Td> </Tr> <Tr> <Td width="120" align="center" height="25" class="bd_right bd_bottom">2</Td> <Td width="120" align="center" height="25" class="bd_right bd_bottom">32123</Td> <Td width="120" align="center" height="25" class="bd_right bd_bottom">321</Td> <Td width="120" align="center" height="25" class="bd_right bd_bottom">332></Td> <Td width="120" align="center" height="25" class="bd_right bd_bottom">32132</Td> <Td width="120" align="center" height="25" class="bd_bottom">32132</Td> </Tr> <Tr> <Td width="120" align="center" height="25" class="bd_right bd_bottom">3</Td> <Td width="120" align="center" height="25" class="bd_right bd_bottom">32123</Td> <Td width="120" align="center" height="25" class="bd_right bd_bottom">321</Td> <Td width="120" align="center" height="25" class="bd_right bd_bottom">332></Td> <Td width="120" align="center" height="25" class="bd_right bd_bottom">32132</Td> <Td width="120" align="center" height="25" class="bd_bottom">32132</Td> </Tr> <Tr> <Td width="120" align="center" height="25" class="bd_right bd_bottom">4</Td> <Td width="120" align="center" height="25" class="bd_right bd_bottom">32123</Td> <Td width="120" align="center" height="25" class="bd_right bd_bottom">321</Td> <Td width="120" align="center" height="25" class="bd_right bd_bottom">332></Td> <Td width="120" align="center" height="25" class="bd_right bd_bottom">32132</Td> <Td width="120" align="center" height="25" class="bd_bottom">32132</Td> </Tr> <Tr> <Td width="120" align="center" height="25" class="bd_right bd_bottom">5</Td> <Td width="120" align="center" height="25" class="bd_right bd_bottom">32123</Td> <Td width="120" align="center" height="25" class="bd_right bd_bottom">321</Td> <Td width="120" align="center" height="25" class="bd_right bd_bottom">332></Td> <Td width="120" align="center" height="25" class="bd_right bd_bottom">32132</Td> <Td width="120" align="center" height="25" class="bd_bottom">32132</Td> </Tr> <Tr> <Td width="120" align="center" height="25" class="bd_right bd_bottom">6</Td> <Td width="120" align="center" height="25" class="bd_right bd_bottom">32123</Td> <Td width="120" align="center" height="25" class="bd_right bd_bottom">321</Td> <Td width="120" align="center" height="25" class="bd_right bd_bottom">332></Td> <Td width="120" align="center" height="25" class="bd_right bd_bottom">32132</Td> <Td width="120" align="center" height="25" class="bd_bottom">32132</Td> </Tr> </table> </Td> </Tr> </table> <div id="changpage"> </div> <script language="javascript"> var obj,j; var page=0; var nowPage=0;//当前页 var listNum=2;//每页显示<ul>数 var PagesLen;//总页数 var PageNum=4;//分页链接接数(5个) onload=function(){ obj=document.getElementById("www_zzjs_net").getElementsByTagName("Tr"); j=obj.length PagesLen=Math.ceil(j/listNum); upPage(0) } function upPage(p){ nowPage=p //内容变换 for (var i=0;i<j;i++){ obj[i].style.display="none" } for (var i=p*listNum;i<(p+1)*listNum;i++){ if(obj[i])obj[i].style.display="block" } strS='<a href="###" onclick="upPage(0)" style="display:block; width:35px; height:18px; border:1px solid #ccc; background:#fff; float:left; font-size:12px; margin-right:5px; text-align:center; line-height:18px; text-decoration:none; color:#888;">首页</a> ' var PageNum_2=PageNum%2==0?Math.ceil(PageNum/2)+1:Math.ceil(PageNum/2) var PageNum_3=PageNum%2==0?Math.ceil(PageNum/2):Math.ceil(PageNum/2)+1 var strC="",startPage,endPage; if (PageNum>=PagesLen) {startPage=0;endPage=PagesLen-1} else if (nowPage<PageNum_2){startPage=0;endPage=PagesLen-1>PageNum?PageNum:PagesLen-1}//首页 else {startPage=nowPage+PageNum_3>=PagesLen?PagesLen-PageNum-1: nowPage-PageNum_2+1;var t=startPage+PageNum;endPage=t>PagesLen?PagesLen-1:t} for (var i=startPage;i<=endPage;i++){ if (i==nowPage)strC+='<a style="color:red; font-weight:700; isplay:block; width:18px; height:18px; border:1px solid #f00; font-size:12px; background:#fff; float:left; margin-right:5px; text-align:center; line-height:18px; text-decoration:none;" href="###" onclick="upPage('+i+')">'+(i+1)+'</a> ' else strC+='<a style="display:block; width:18px; height:18px; border:1px solid #ccc; background:#fff; float:left; font-size:12px; text-align:center; margin-right:5px; line-height:18px; text-decoration:none; color:#888;" href="###" onclick="upPage('+i+')">'+(i+1)+'</a> ' } strE=' <a href="###" onclick="upPage('+(PagesLen-1)+')" style="display:block; width:35px; height:18px; border:1px solid #ccc; background:#fff; float:left; font-size:12px; margin-right:5px; text-align:center; line-height:18px; text-decoration:none; color:#888;">尾页</a> ' strE2=nowPage+1+"/"+PagesLen+"页"+" 共"+j+"条" document.getElementById("changpage").innerHTML=strS+strC+strE+strE2 } </script> </body> </html>
