一、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>效果如图：
