js分页实现，前端实现

最新推荐文章于 2024-06-13 23:05:50 发布

杀生丸好帅

最新推荐文章于 2024-06-13 23:05:50 发布

阅读量9.7k

点赞数 1

本文链接：https://blog.csdn.net/qq_43682438/article/details/84034154

版权

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

主要是借鉴了网上一个例子，自己重新加了样式，添加了跳转，修改了一些小地方，用于和大家一起分享，前端分页的技巧，表格的数据是我已经写好了，其实大家也可以前端渲染表格然后再分页，都是可以的。

其实分页最关键是这两句：

var startRow = (currentPage - 1) * pageSize+1; //currentPage 为当前页，pageSize为每页显示的数据量
var endRow = currentPage * pageSize;

找到我们需要显示的行的范围（starRow~endRow）

ps:这里在跳转的时候遇到了一个小BUG，就是获取到的select的value值是string类型的，比如获取到了1，然后你想再加1的时候就会变成"11" 而不是我们想要的"2"，所以这里需要用parseInt( )来转换一下，小细节需要注意呀！！！

效果图：

<!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;//总页