JS前端分页
Tanersci 人气:0想了解JS实现前端分页效果的相关内容吗，Tanersci在本文为您仔细讲解JS前端分页的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：js,分页，下面大家一起来学习吧。
一、HTML部分
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<script src="js/jquery.js"></script>
<style type="text/css">
a{text-decoration: none;}
table {border-collapse:collapse;width: 100%;font-size: 14px;}
th{background-color: #ddd;}
table, td, th {border:1px solid #e7e8ec;}
th,tr{height: 40px;}
td {text-align: center;}
tr:hover{background-color: #f9f4f3;}
.barcon {width: 1000px;margin: 0 auto;text-align: center;}
.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 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="myTable">
<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="barcon2" class="barcon2">
<ul>
<li><a href="###" id="prePage">上一页</a></li>
<li id="barcon1"></li>
<li><a href="###" id="nextPage">下一页</a></li>
<li><input type="text" id="num" size="2" oninput="value=value.replace(/[^\d]/g,'')"></li>
<li><a href="###" id="jumpPage" onclick="jumpPage()">跳转</a></li>
</ul>
</div>
</div>
</body>
</html>
二、JS逻辑
<script>
// 初始化数据
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);
$("#myTable")[0].appendChild(trNode);
}
}
$(function(){
dynamicAddUser(80);
goPage(1,10);
})
/**
* 分页函数
* pno--页数
* psize--每页显示记录数
* 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
* 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
**/
var pageSize=10;//每页显示行数
var currentPage_=1;//当前页全局变量，用于跳转时判断是否在相同页，在就不跳，否则跳转。
var totalPage;//总页数
function goPage(pno,psize){
var itable = document.getElementById("myTable");
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;
$("#myTable tr").hide();
for(var i=startRow-1;i<endRow;i++) {
$("#myTable tr").eq(i).show();
}
var tempStr = currentPage+"/"+totalPage;
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");
}
}
function jumpPage() {
var num=parseInt($("#num").val());
if(num != currentPage_ && !isNaN(num) && num <= totalPage && num > 0) {
goPage(num,pageSize);
}
}
</script>
效果如图：
加载全部内容