❶ js的分页原理以及实现步骤是什么
主要是借鉴了网上一个例子，修改了一些小地方，前端分页的技巧，表格的数据是已经写好了，可以前端渲染表格然后再分页，都是可以的。
其实分页最关键是这两句：
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 print?
<!doctypehtml>
<html>
<head>
<metacharset='utf-8'>
<styletype="text/css">
a{
text-decoration:none;
}
.table2{
border:#C8C8C8solid;
border-width:1px0px0px1px;
background:#F3F0F0;
margin-top:25px;
}
.td0{
border:#C8C8C8solid;
border-width:001px0;
}
.td2{
border:#C8C8C8solid;
border-width:01px1px0;
}
.barcon{
width:1000px;
margin:0auto;
text-align:center;
}
.barcon1{
font-size:17px;
float:left;
margin-top:20px;
}
.barcon2{
float:right;
}
.barcon2ul{
margin:20px0;
padding-left:0;
list-style:none;
text-align:center;
}
.barcon2li{
display:inline;
}
.barcon2a{
font-size:16px;
font-weight:normal;
display:inline-block;
padding:5px;
padding-top:0;
color:black;
border:1pxsolid#ddd;
background-color:#fff;
}
.barcon2a:hover{
background-color:#eee;
}
.ban{
opacity:.4;
}
</style>
</head>
<body>
<tablewidth="950"cellpadding="0"cellspacing="0"class="table2"align="center">
<thead>
<tr>
<tdcolspan="3"height="33"class="td0"></td>
<tdalign="center"class="td2"><ahref="###">添加用户</a></td>
</tr>
<tralign="center">
<thwidth="150"height="33"class="td2">序号</th>
<thwidth="300"class="td2">用户名</th>
<thwidth="250"class="td2">权限</th>
<thwidth="250"class="td2">操作</th>
</tr>
</thead>
<tbodyid="adminTbody">
<tralign="center">
<tdclass="td2"height="33"width="150">1</td>
<tdclass="td2">admin</td>
<tdclass="td2">管理员</td>
<tdclass="td2"><ahref="###">修改</a></td>
</tr>
</tbody>
</table>
<divid="barcon"class="barcon">
<divid="barcon1"class="barcon1"></div>
<divid="barcon2"class="barcon2">
<ul>
<li><ahref="###"id="firstPage">首页</a></li>
<li><ahref="###"id="prePage">上一页</a></li>
<li><ahref="###"id="nextPage">下一页</a></li>
<li><ahref="###"id="lastPage">尾页</a></li>
<li><selectid="jumpWhere">
</select></li>
<li><ahref="###"id="jumpPage"onclick="jumpPage()">跳转</a></li>
</ul>
</div>
</div>
<scriptsrc="jquery.js"></script>
<script>
/*动态生成用户函数
num为生成的用户数量
*/
functiondynamicAddUser(num){
for(vari=1;i<=num;i++)
{
vartrNode=document.createElement("tr");
$(trNode).attr("align","center");
//序号
vartdNodeNum=document.createElement("td");
$(tdNodeNum).html(i+1);
tdNodeNum.style.width="150px";
tdNodeNum.style.height="33px";
tdNodeNum.className="td2";
//用户名
vartdNodeName=document.createElement("td");
$(tdNodeName).html("lzj"+i);
tdNodeName.style.width="300px";
tdNodeName.className="td2";
//权限
vartdNodePri=document.createElement("td");
tdNodePri.style.width="250px";
tdNodePri.className="td2";
varpriText=document.createElement("span");
$(priText).css({"display":"inline-block","text-align":"center"});
$(priText).text("普通用户");
tdNodePri.appendChild(priText);
//操作
vartdNodeOper=document.createElement("td");
tdNodeOper.style.width="170px";
tdNodeOper.className="td2";
vareditA=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);
vartempOption="";
for(vari=1;i<=totalPage;i++)
{
tempOption+='<optionvalue='+i+'>'+i+'</option>'
}
$("#jumpWhere").html(tempOption);
})
/**
*分页函数
*pno--页数
*psize--每页显示记录数
*分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
*纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
**/
varpageSize=0;//每页显示行数
varcurrentPage_=1;//当前页全局变量，用于跳转时判断是否在相同页，在就不跳，否则跳转。
vartotalPage;//总页数
functiongoPage(pno,psize){
varitable=document.getElementById("adminTbody");
varnum=itable.rows.length;//表格所有行数(所有记录数)
pageSize=psize;//每页显示行数
//总共分几页
if(num/pageSize>parseInt(num/pageSize)){
totalPage=parseInt(num/pageSize)+1;
}else{
totalPage=parseInt(num/pageSize);
}
varcurrentPage=pno;//当前页数
currentPage_=currentPage;
varstartRow=(currentPage-1)*pageSize+1;
varendRow=currentPage*pageSize;
endRow=(endRow>num)?num:endRow;
//遍历显示数据实现分页
/*for(vari=1;i<(num+1);i++){
varirow=itable.rows[i-1];
if(i>=startRow&&i<=endRow){
irow.style.display="";
}else{
irow.style.display="none";
}
}*/
$("#adminTbodytr").hide();
for(vari=startRow-1;i<endRow;i++)
{
$("#adminTbodytr").eq(i).show();
}
vartempStr="共"+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);
}
functionjumpPage()
{
varnum=parseInt($("#jumpWhere").val());
if(num!=currentPage_)
{
goPage(num,pageSize);
}
}
</script>
</body>
</html>
❷ JS 前端的筛选代码
我特么的终于写出来了，，给大家拿去用用看，自己添加css样式。我感觉头发要掉了。
粗略的样子就是这样，后面是代码。
//JavaScriptDocument
//JavaScriptDocument
/*!jQueryv2.1.4|(c)2005,2015jQueryFoundation,Inc.|jquery.org/license*/
$(document).ready(function(){
$(".uox").click(function(){
$(".uox-1").show(500);
$(".uos-1").hide(500);
$(".box-1").hide(500);
$(".jod-1").hide(500);
$(".sor-1").hide(500);
$("#page").hide(500);
});
$(".uos").click(function(){
$(".uos-1").show(500);
$(".uox-1").hide(500);
$(".box-1").hide(500);
$(".jod-1").hide(500);
$(".sor-1").hide(500);
$("#page").hide(500);
});
$(".box").click(function(){
$(".box-1").show(500);
$(".uos-1").hide(500);
$(".uox-1").hide(500);
$(".jod-1").hide(500);
$(".sor-1").hide(500);
$("#page").hide(500);
});
$(".jod").click(function(){
$(".jod-1").show(500);
$(".uos-1").hide(500);
$(".box-1").hide(500);
$(".uox-1").hide(500);
$(".sor-1").hide(500);
$("#page").hide(500);
});
$(".sor").click(function(){
$(".sor-1").show(500);
$(".uos-1").hide(500);
$(".box-1").hide(500);
$(".jod-1").hide(500);
$(".uox-1").hide(500);
$("#page").hide(500);
});
//第一组筛选结束
//开始第二组筛选
$(".newch").click(function(){
$(".newch-1").show(500);
$(".bopch-1").hide(500);
$(".luoch-1").hide(500);
$(".dizch-1").hide(500);
$(".dnych-1").hide(500);
$(".ousch-1").hide(500);
$(".tiych-1").hide(500);
$(".getch-1").hide();
$("#page").hide(500);
});
$(".luoch").click(function(){
$(".luoch-1").show(500);
$(".newch-1").hide(500);
$(".bopch-1").hide(500);
$(".dizch-1").hide(500);
$(".dnych-1").hide(500);
$(".ousch-1").hide(500);
$(".tiych-1").hide(500);
$(".getch-1").hide();
$("#page").hide(500);
});
$(".bopch").click(function(){
$(".bopch-1").show(500);
$(".newch-1").hide(500);
$(".dizch-1").hide(500);
$(".dnych-1").hide(500);
$(".luoch-1").hide(500);
$(".ousch-1").hide(500);
$(".tiych-1").hide(500);
$(".getch-1").hide(500);
$("#page").hide(500);
});
$(".dizch").click(function(){
$(".dizch-1").show(500);
$(".bopch-1").hide(500);
$(".newch-1").hide(500);
$(".luoch-1").hide(500);
$(".dnych-1").hide(500);
$(".ousch-1").hide(500);
$(".tiych-1").hide(500);
$(".getch-1").hide(500);
$("#page").hide(500);
});
$(".dnych").click(function(){
$(".dnych-1").show(500);
$(".bopch-1").hide(500);
$(".dizch-1").hide(500);
$(".luoch-1").hide(500);
$(".newch-1").hide(500);
$(".ousch-1").hide(500);
$(".tiych-1").hide(500);
$(".getch-1").hide(500);
$("#page").hide(500);
});
$(".ousch").click(function(){
$(".ousch-1").show(500);
$(".bopch-1").hide(500);
$(".dizch-1").hide(500);
$(".luoch-1").hide(500);
$(".dnych-1").hide(500);
$(".newch-1").hide(500);
$(".tiych-1").hide(500);
$(".getch-1").hide(500);
$("#page").hide(500);
});
$(".tiych").click(function(){
$(".tiych-1").show(500);
$(".bopch-1").hide(500);
$(".dizch-1").hide(500);
$(".luoch-1").hide(500);
$(".dnych-1").hide(500);
$(".ousch-1").hide(500);
$(".newch-1").hide(500);
$(".getch-1").hide(500);
$("#page").hide(500);
});
$(".getch").click(function(){
$(".getch-1").show(500);
$(".bopch-1").hide(500);
$(".luoch-1").hide(500);
$(".dizch-1").hide(500);
$(".dnych-1").hide(500);
$(".ousch-1").hide(500);
$(".tiych-1").hide(500);
$(".newch-1").hide(500);
$("#page").hide(500);
});
//第二组结束
//第三组筛选
$(".wan-10").click(function(){
$(".wan-sh").show(500);
$(".wan-es").hide(500);
$(".wan-ss").hide(500);
$(".wan-ws").hide(500);
$(".wan-bs").hide(500);
$(".wan-yb").hide(500);
$(".wan-oth").hide(500);
});
$(".wan-20").click(function(){
$(".wan-es").show(500);
$(".wan-sh").hide(500);
$(".wan-ss").hide(500);
$(".wan-ws").hide(500);
$(".wan-bs").hide(500);
$(".wan-yb").hide(500);
$(".wan-oth").hide(500);
});
$(".wan-30").click(function(){
$(".wan-ss").show(500);
$(".wan-es").hide(500);
$(".wan-sh").hide(500);
$(".wan-ws").hide(500);
$(".wan-bs").hide(500);
$(".wan-yb").hide(500);
$(".wan-oth").hide(500);
});
$(".wan-50").click(function(){
$(".wan-ws").show(500);
$(".wan-es").hide(500);
$(".wan-ss").hide(500);
$(".wan-sh").hide(500);
$(".wan-bs").hide(500);
$(".wan-yb").hide(500);
$(".wan-oth").hide(500);
});
$(".wan-80").click(function(){
$(".wan-bs").show(500);
$(".wan-es").hide(500);
$(".wan-ss").hide(500);
$(".wan-ws").hide(500);
$(".wan-sh").hide(500);
$(".wan-yb").hide(500);
$(".wan-oth").hide(500);
});
$(".wan-100").click(function(){
$(".wan-yb").show(500);
$(".wan-es").hide(500);
$(".wan-ss").hide(500);
$(".wan-ws").hide(500);
$(".wan-bs").hide(500);
$(".wan-sh").hide(500);
$(".wan-oth").hide(500);
});
$(".wan-ot").click(function(){
$(".wan-oth").show(500);
$(".wan-es").hide(500);
$(".wan-ss").hide(500);
$(".wan-ws").hide(500);
$(".wan-bs").hide(500);
$(".wan-yb").hide(500);
$(".wan-sh").hide(500);
});
//第三组结束
//全部==按钮
$(".qos").click(function(){
$("*").show(500);
$(".uio").show(500);
$(".uip").show(500);
$("#page").hide();
});
$(".zhan").click(function(){
$("#page").slideToggle(500);
});
$(".hons").click(function(){
$("*").toggleClass("red");
});
//变色（红色）
$(".newsli").first().css("color","#5A0305");
$(".newsa").first().css("color","#5A0305");
$(".newsli").eq(1).css("color","#C0832C");
$(".newsa").eq(1).css("color","#C0832C");
$(".newsli").eq(2).css("color","#12B4B7");
$(".newsa").eq(2).css("color","#12B4B7");
$(".newsli").eq(3).css("color","#000");
$(".newsli").eq(4).css("color","#000");
$(".newsli").eq(5).css("color","#000");
$(".newsli").eq(6).css("color","#000");
$(".newsli").eq(7).css("color","#000");
$(".newsli").eq(8).css("color","#000");
$(".newsli").eq(9).css("color","#000");
//获取外部文件代码
$(".huoq").click(function(){
$("#div1").load("../DW+GY/css/loud.htm");
});
});
❸ html简单的分页代码怎么写
网页链接
看一下这个吧，现在很少有人手动写分页了，一般都是用插件。或者现在主流的前端框架，都有用户量特别大的前端组件库，用起来很方便。其实这个分页手写js并不难，主要是理清逻辑就可以了，能写但是没必要~如果是比较老的前端框架，必须手写js分页逻辑，追问就行，我给你屡屡