前端分页例子

最新推荐文章于 2024-02-07 10:05:00 发布
最新推荐文章于 2024-02-07 10:05:00 发布
阅读量1.4k 收藏 6
点赞数 1
分类专栏： javaScript/jquery 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuanyuan214365/article/details/72629162
版权

目的：分页有前端和后端的方法，最近弄了一个前端分页的方法代码如下

例子解析： 前端分页方法基于从后台查出来数据，渲染了表格，然后再去控制表格中数据的显示分页。代码核心在于goPage()方法

<!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>
    <body οnlοad="goPage(1,6);">  
    <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>  
    <tr align="center">  
        <td class="td2" height="33" width="150">1</td>  
        <td class="td2" >zxn</td>  
        <td class="td2" >普通用户</td>  
        <td class="td2" ><a href="###">修改</a></td>  
    </tr>  
    <tr align="center">  
        <td class="td2" height="33" width="150">1</td>  
        <td class="td2" >zxn1</td>  
        <td class="td2" >普通用户</td>  
        <td class="td2" ><a href="###">修改</a></td>  
    </tr>  
    <tr align="center">  
        <td class="td2" height="33" width="150">1</td>  
        <td class="td2" >zxn2</td>  
        <td class="td2" >普通用户</td>  
        <td class="td2" ><a href="###">修改</a></td>  
    </tr>  
    <tr align="center">  
        <td class="td2" height="33" width="150">1</td>  
        <td class="td2" >zxn3</td>  
        <td class="td2" >普通用户</td>  
        <td class="td2" ><a href="###">修改</a></td>  
    </tr>  
    <tr align="center">  
        <td class="td2" height="33" width="150">1</td>  
        <td class="td2" >zxn4</td>  
        <td class="td2" >普通用户</td>  
        <td class="td2" ><a href="###">修改</a></td>  
    </tr>  
    <tr align="center">  
        <td class="td2" height="33" width="150">1</td>  
        <td class="td2" >zxn5</td>  
        <td class="td2" >普通用户</td>  
        <td class="td2" ><a href="###">修改</a></td>  
    </tr>  
    <tr align="center">  
        <td class="td2" height="33" width="150">1</td>  
        <td class="td2" >zxn6</td>  
        <td class="td2" >普通用户</td>  
        <td class="td2" ><a href="###">修改</a></td>  
    </tr>  
    <tr align="center">  
        <td class="td2" height="33" width="150">1</td>  
        <td class="td2" >zxn7</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" οnclick="jumpPage()">跳转</a></li>  
            </ul>  
        </div>  
</div> 
</body>
<script src="jquery.min.js"></script>  
<script>  
/** 
 * 分页函数 
 * pno--页数 
 * psize--每页显示记录数 
 * 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数 
 * 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能 
**/  
  
var pageSize=0;//每页显示行数  
var currentPage_=1;//当前页全局变量，用于跳转时判断是否在相同页，在就不跳，否则跳转。  
function goPage(pno,psize){  
    var itable = document.getElementById("adminTbody");  
    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;      
       //遍历显示数据实现分页  
    for(var i=1;i<(num+1);i++){      
        var irow = itable.rows[i-1];  
        if(i>=startRow && i<=endRow){  
            irow.style.display = "";      
        }else{  
            irow.style.display = "none";  
        }  
    }  
    var tempStr = "共"+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");  
    }     
    var tempOption="";  
    for(var i=1;i<=totalPage;i++)  
    {  
        tempOption+='<option value='+i+'>'+i+'</option>'  
    }  
    $("#jumpWhere").html(tempOption);  
    $("#jumpWhere").val(currentPage);  
}  
  
  
function jumpPage()  
{  
    var num=parseInt($("#jumpWhere").val());  
    console.log(pageSize);  
    if(num!=currentPage_)  
    {  
        goPage(num,pageSize);  
    }  
}  
  
</script>  
</body>   
</html>


伏特加的滋味
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jQuery前端分页示例分享
10-24
主要介绍了jQuery前端分页示例分享的相关资料,需要的朋友可以参考下
bootstrap table分页例子.zip
09-20
bootstrap table分页例子 bootstrap table实现了2种分页方式。
前端实现分页效果
welcome
09-09 1万+
前端分页？后端做得了的事，我前端也要做。后端做不了的事，我前端更要做。
通用分页详解（前端）
m0_74915426的博客
06-29 4387
首页
11个web前端开发实战项目案例+源码！拿走就是了
最新发布
xuezhangmen的博客
02-07 1905
项目如何构架与测试。CSS3：CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。设计模式：面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程。JS基本特效：常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。
前端分页处理
qq_43532275的博客
12-10 3401
前端分页
前端显示分页详解
一枚数学专业的小码农的博客
12-16 3803
分页保姆级详解
前端分页(详细步骤)
naoguaten的博客
12-22 1万+
一、思路 1.设置全局变量，当前页，总页数，总条数，每页显示多少条，所有页数据，当前页数据，start（总数据开始截取位置）、end（总数据结束截取位置） 2.调用接口，请求到所有的数据后，改变相应的全局变量 3.通过对总数据进行filter过滤得到当前页数据，然后把数据渲染到表格上， 4.其他操作：如页码的点击、左右箭头的点击都会改变当前页的内容，就是改变相应全局变量，然后重新过滤当前页数据，然后进渲染到页面上 二、具体步骤 1.定义变量 //当前页 let nowPage = 1 // 每页显示多少条
js分页批量打印例子
04-12
这里包括一个js分页批量打印例子以及用的过程当中应该注意的问题
25种分页css样式
01-06
25种简单的前端分页样式的例子下载，只有前端的样式。
纯js分页(ajax获取数据)
10-14
此工具的目的是实现网页数据分页显示完全脱离服务器，单纯使用js实现，现在功能还比较简单，只能单纯显示数据，有其他需求可以联系探讨。 工具例子使用ajax获取列表数据，当然其他形式也行，最后应该把数据转换成...
前端分页实现demo
09-13
前端分页实现思路，采用java在控制台输出，可替换相应的输出为html，即实现前端的分页输出，输出的页号只依赖与当前页号和总页数
新手学习可前端分页，前端分页，简单的前端分页，html分页，html前端分页
07-13
新手学习可前端分页，里面注释详细，详细到你会觉得啰嗦，很好理解，代码简单，理解透彻之后自己也可以手写分页，对新手，对想学习前端分页的童鞋，有很大帮助，大神勿喷，这个过于简单，谢谢。
前端如何实现分页？
m0_50441807的博客
06-06 1万+
先定义分页中需要用的三个值：currentPage（当前页码）、total（总条数）、pageSize（每页展示的数据量） 分页的思路：把所有的数据请求回来后，通过来进行截取每一页的数据；假设当前页是，，那么应该从开始截取，到结束，自己验证下，找到这样的规律后，就可以截取每一页的数据了；......
工作这么久了，还不懂如何使用纯前端实现分页吗？-假如后端一股脑返回给你所有数据，让你自个实现分页该怎么办
商务合作 / 项目定制开发 / 前端一对一培训、答疑
06-28 1440
因为后端返回给你的数据，你一般会整个存放在一个数组中，要显示第一页，其实就是在该数组中分割提取下标为0-9的数据项，如果是第三页，则在该数组中提取第20-29的数据项，创建一个计算属性，在该计算属性中完成数据的提取，再给到视图即可。有这么个场景，后端接口的列表数据没有做分页给我，相当于是直接返回所有的列表数据，比如有100条就返回100，但是前端显示，则需要做成分页，比如10条为一页。框架，其实也很好办，主要是记住以上前端分页的思路：找到某一页的开始下标和结束下标，然后去分割数组，返回给视图。
前端（Vue）实现自行分页的两种方法
热门推荐
小钻风的博客
03-08 3万+
前端做页面时，经常会遇到表格+分页的组合，有时因为一些原因，需要前端自己实现分页，下面介绍2中方法实现分页， 方法一：slice方法 slice(参数1，参数2)方法是返回一个新的数组对象 参数1：起始下标数 参数2：结束下标数(不计算在内) 如data:[1,2,3,4,5,6,7,8]，那么data.slice(0,3)就为下标为0，1，2,不包括下标为3的数，即[1,2,3]，可以看成数学中的[0,3) slice方法详细讲解 这个原理就和分页原理很相似，分页也是把一个很长的数组，按照每页多少条（s
通用分页（前端）
liaozhixiangjava的博客
06-29 216
Eclipse Debug调试是Eclipse集成开发环境（IDE）中的一种调试工具，用于帮助开发人员在开发过程中定位和修复Java程序的错误。Eclipse Debug调试提供了以下功能：设置断点：通过在代码的特定行上设置断点，开发人员可以指示调试器在程序执行到该行时暂停。这样可以方便地观察程序的状态和执行流程。单步执行：开发人员可以逐行执行代码，可以单步进入方法中、单步跳过当前方法、单步跳出方法等，以深入了解代码的执行过程。
前端数据分页——table表数据分页方法(1)
AI量化交易实验室
07-13 5321
我们在页面展示一个table表格的时候，当数据量较大时，常常会考虑到数据分页的问题，数据分页一般有三种方式，分别是前端数据分页，后端数据分页，数据库分页。 前端数据分页：是把所有数据加载到前端，然后在前端用js实现数据的分页，这种分页方式是最方便简单的，但是也是效果最差的。因为当数据量很大时，前端加载数据耗时很久，页面会因为加载数据而无法正常显示，体验很差。并且因为数据是一次性加载到前端，当数据...
前端实现分页
qq_45136544的博客
04-23 8190
前端分页 文章目录前端分页前言一、后台的传入数据二、前端页面准备步骤1.准备一个div2.在上方引入jquery.js文件3.js代码总结 前言 当后台通过写查询得到多条数据时，不在使用数据库分页，直接返回查询的全部数据，在前台直接通过前端js进行分页处理： 一、后台的传入数据 示例： List list = forderService.selectList(); model.addAttribute(“list”, list); 二、前端页面准备步骤 1.准备一个div 在这个div里面会放入一个ta
vue前端分页
06-02
Vue前端分页可以通过以下步骤实现： 1. 在Vue组件中定义一个数组，用于存放所有数据。 2. 定义一个变量，用于存放每页显示的数据条数。 3. 定义一个变量，用于存放当前页码。 4. 定义一个计算属性，用于计算总页数。 5. 定义一个方法，用于获取当前页的数据。 6. 在页面中显示当前页的数据。 7. 定义上一页和下一页的方法，用于切换页码。 8. 在页面中显示分页组件，包括上一页、下一页、页码等。 以下是一个简单的示例代码： ```html <template> <div> <ul> <li v-for="item in currentPageData">{{ item }}</li> </ul> <div> <button @click="prevPage">上一页</button> <span>{{ currentPage }}/{{ totalPages }}</span> <button @click="nextPage">下一页</button> </div> </div> </template> <script> export default { data() { return { dataList: ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6', '数据7', '数据8', '数据9', '数据10'], pageSize: 3, currentPage: 1 } }, computed: { totalPages() { return Math.ceil(this.dataList.length / this.pageSize) }, currentPageData() { const start = (this.currentPage - 1) * this.pageSize const end = start + this.pageSize return this.dataList.slice(start, end) } }, methods: { prevPage() { if (this.currentPage > 1) { this.currentPage-- } }, nextPage() { if (this.currentPage < this.totalPages) { this.currentPage++ } } } } </script> ``` 在这个例子中，我们通过计算属性`totalPages`计算出总页数，然后通过方法`currentPageData`获取当前页的数据。通过按钮调用方法`prevPage`和`nextPage`来切换页码。在页面中，我们显示当前页的数据，并显示上一页、下一页和页码等信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

伏特加的滋味

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值