js的分页原理以及实现步骤是什么？ 求解HTML分页JS的设计和实现
js\u5206\u9875\u539f\u7406 \u662f\u4ec0\u4e48\u4e24\u79cd\u90fd\u6709\uff0c
1\u3001\u4e00\u6b21\u6027\u5168\u90e8\u67e5\u51fa\u6765\uff0c\u70b9\u51fb\u7ffb\u9875\u7684\u65f6\u5019\u53ea\u8981\u5207\u6362\u5c42\u7684\u663e\u793a\u548c\u9690\u85cf\u5c31\u884c\u4e86\uff0c\u4f46\u662f\u521a\u8fdb\u9875\u9762\u7684\u65f6\u5019\u52a0\u8f7d\u6570\u636e\u91cf\u592a\u5927
2\u3001\u8df3\u8f6c\u540e\u67e5\u8be2\u7ed1\u5b9a\u6570\u636e\uff0c\u51cf\u5c11\u4e86\u7b2c\u4e00\u6b21\u8fdb\u9875\u9762\u65f6\u5019\u7684\u6570\u636e\u91cf\uff0c\u4f46\u662f\u6bcf\u6b21\u7ffb\u9875\u90fd\u8981\u67e5\u8be2
http://www.ycee.cn/site/jinan/
\u4f60\u770b\u4e00\u4e0b\u8fd9\u4e2a\u9875\u9762\uff0c\u5730\u56fe\u5de6\u8fb9\u7684\u5206\u9875\u5c31\u662f\u6211\u81ea\u5df1\u5199\u7684\uff0c\u662f\u7528\u7b2c\u4e8c\u79cd\u5b9e\u73b0\u7684
\u9875\u9762\u6700\u4e0b\u9762\u7684\u662f\u4e00\u6b21\u6027\u5168\u90e8\u52a0\u8f7d\u5b8c\u6210\uff0c\u662f\u7b2c\u4e00\u79cd
\u8fd9\u4e2a\u7528HTML\u4e5f\u53ef\u4ee5\u505a\u7528JS\u4e5f\u53ef\u4ee5\u505a\uff0c\u4e0d\u8fc7\u8fd9\u4e2a\u529f\u80fd\u662f\u7528\u540e\u53f0\u5b8c\u6210\u7684\u3002
主要是借鉴了网上一个例子，修改了一些小地方，前端分页的技巧，表格的数据是已经写好了，可以前端渲染表格然后再分页，都是可以的。
其实分页最关键是这两句：
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=1;i<=num;i++)
{
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=1;i<=totalPage;i++)
{
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=1;i<(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-1;i<endRow;i++)
{
$("#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>
绛旓細浠栫殑閭ｄ釜鏄繖鏍峰仛鐨勶紝棣栧厛瀹氫箟涓涓猟iv div閲岄潰瀹氫箟涓涓猽l 锛堝寘鍚玪i锛変綘鐨勬暟鎹簱娣诲姞涓涓暣椤靛唴瀹圭殑鏃跺欏氨娣诲姞涓涓猯i鍖呭惈浣犵殑鍐呭 js鐨璇濈敤tagname 鏉ヨ幏鍙杁iv閲岄潰鐨刲i鐨勪釜鏁 鍐嶇敤鏁扮粍鏉ラ亶鍘 鐢╢or璇彞鏉ユ樉绀 闅愯棌li灏卞彲浠ヤ簡
绛旓細鍋囪涓缁勫浘鐗:Image0,Image1,Image2...Image19 var pageSizes = 5; //鍒嗘瘡椤5寮 var currentPage = parseInt('<%=request("page")%>'); //鍙栧緱褰撳墠椤电爜 var recordCount = 20; //鍥剧墖鏁伴噺 if(currentPage<1 || currentPage == NaN){ currentPage = 1;} for(var i=0;i<recordCou...
绛旓細鎴戣繖閲屾湁涓潤鎬佺殑JS鍒嗛〉浠ｇ爜,鐪嬮傜敤涓 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> CSS+JS瀹炵幇鐨勯潤鎬侀〉闈㈢炕椤垫晥鏋 * { font : normal 12px/1.5em "Microsoft YaHei", Tahoma; _font : normal 12px/1.5em Ta...
绛旓細鎴戜篃閬囧埌杩囪繖涓棶棰,鍙戠敓杩欑鎯呭喌搴旇灏变袱绉嶅師鍥 1.SQL璇彞鍐欓敊浜 2.浣犳彁浜ょ殑鍊间笉瀵 鑷繁娴嬭瘯涓涓 <a href="servlet/FyServlet?currentPage=${currentPage-1 }&&user=${username }&&strURL=<%=strURL %>">涓婁竴椤 鎴戣嚜宸卞啓鐨勬槸杩欐牱鎻愪氦鐨勫笇鏈涘浣犳湁甯姪 ...
绛旓細 //涓婁竴椤 function up(){ //棣栧厛 浣犻〉闈笂瑕佹湁涓涓爣蹇 鏍囧織褰撳墠鏄鍑犻〉 //鐒跺悗鍦ㄨ繖閲屽噺鍘1 鍐嶆斁杩涢摼鎺ラ噷 var pageno=褰撳墠椤垫暟-1; if(pageno==0){ alert("褰撳墠宸茬粡鏄涓椤!"); return false; } /*杩欓噷鍦ㄥ皢褰撳墠椤垫暟璧嬪煎埌椤甸潰鍋氭樉绀烘爣蹇*/ wind...
绛旓細鍙互鍟,浣犱竴娆℃妸鏁版嵁鍒版斁鍒伴〉闈㈤噷,鐒跺悗鐐逛笅椤电洿鎺ュ湪椤甸潰閲岀殑鏁版嵁閲岄潰鍙栨暟鎹,涓嶇敤浠庢湇鍔″櫒閲屽彇,鑷劧涔熷氨娌℃湁 index.asp?page=2杩欐牱鐨) 鏄剧ず鍑烘潵浜.鍙互涓寮濮嬪氨鎶婃暟鎹彇鍒,鐒跺悗鏀惧埌js 鐨鏁扮粍閲,鎯崇敤鐨勬椂鍊欏湪浠庢暟缁勯噷鍙.杩欐牱椤甸潰涓鍔犺浇灏变細灏嗘暟鎹笅杞藉埌瀹㈡埛绔殑鍐呭瓨閲,涓嶇敤浠庢湇鍔″櫒閲岄潰鍙栦簡....
绛旓細杩欏簲璇ユ槸鏈绠鍗曠殑瀹炵幇鏂瑰紡浜嗐備綘鐪嬩竴涓嬪惂锛屼笉鎳傜殑鍐嶅洖澶嶃*{margin:0px; padding:0px;}div {width:150px; height:20px; overflow:hidden; position:relative; display:inline-block; margin-top:5px;}ul {display:inline-block; height:20px; position:absolute; top:0px; left:0px;}li {w...
绛旓細缁欎綘涓涓JS鐨勫垎椤锛庝笉杩囷紝杩欐牱鍒嗛〉鍜屾暟鎹簱鏄紓姝ョ殑锛庨〉闈㈡枃浠:--- <HTML> <BODY onload="loadpage()"> </BODY> </HTML> JS鏂囦欢pageshow1.js ---
绛旓細閭ｅ氨瑕侀氳繃Ajax绛夋湇鍔＄浜や簰瀹炵幇浜,閭ｅ氨璺烰SP,PHP,ASP绛鍒嗛〉鍘熺悊涓鏍凤紝鍙槸琛ㄧ幇鐨勬柟寮忎笉涓鏍疯屽凡(涓よ呭尯鍒氨鏄湴鍧鏍忎笉浼氭敼鍙,杩樻湁鍙槸灞閮ㄥ埛鏂,閫傚悎鐢ㄥ湪灏忚寖鍥鐨勫垎椤涓).鍏蜂綋灏辨槸鐐逛笅涓椤电殑鏃跺欏幓鏈嶅姟绔煡璇㈡暟鎹紝鐒跺悗閫氳繃JS鎶婃暟鎹寜鐓ф牸寮忓～鍏呭埌鏄剧ず鍖哄煙,灏卞彲浠ヤ簡. 鍙浜嗕釜澶ф鍘熺悊!
绛旓細姣忔閫氳繃ajax鑾峰彇涓椤垫暟鎹紙璁剧疆澶氬皯鏉★級锛岀劧鍚庢瘡娆＄偣鍑婚〉鏁扮殑鏃跺欙紝鎶婂綋鍓嶉〉鏁板拰瑕佹樉绀虹殑椤垫暟閫氳繃ajax浼犺繃鍘
