| 本文实例为大家分享了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>效果如图： 
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
vue-pdf实现文件在线预览
Vue实现PC端分辨率自适应的示例代码 |
