用JS实现前端分页页码管理,可以很美观的区分页码显示(这也是参考大多数网站的分页页码展示),能够有很好的用户体验,这也是有业务需要就写了一下,还是新手,经验不足,欢迎指出批评!

首先先看效果图:

    这是初始页面(也就是第一页)的界面,如果为第一页时,则首页和上一页按钮不可用,为了展示分页的效果,我当前的分页是一条一页

    这是页码大于5页时展示的效果:1,2页始终始终显示(考虑到用户体验)

    这是最后一页的效果图:

    下面直接上js代码:

//页码显示
$(function(){ var dqPage = $("#dqPage").text();//得到当前页数
dqPage = parseInt(dqPage);//得到的文本转成int
var pageCount = $("#pageCount").text();//得到总页数
pageCount = parseInt(pageCount);
var i = 1;
i = parseInt(i);
var item="";
var href = "这里是请求地址";
if (pageCount <= 5 ) {//总页数小于五页,则加载所有页 for (i; i <= pageCount; i++) {
if (i == dqPage) {
item += "<span class='disabled'>"+i+"</span>";
}else{
item += "<a href='"+href+i+"' >"+i+"</a>";
}
};
$('#pageBtn').append(item);
return;
}else if (pageCount > 5) {//总页数大于五页,则加载五页
if (dqPage < 5) {//当前页小于5,加载1-5页
for (i; i <= 5; i++) {
if (i == dqPage) {
item += "<span class='disabled'>"+i+"</span>";
}else{
item += "<a href='"+href+i+"' >"+i+"</a>";
}
};
if (dqPage <= pageCount-2) {//最后一页追加“...”代表省略的页
item += "<span> . . . </span>";
}
$('#pageBtn').append(item);
return;
}else if (dqPage >= 5) {//当前页大于5页
for (i; i <= 2; i++) {//1,2页码始终显示
item += "<a href='"+href+i+"' >"+i+"</a>";
}
item += "<span> . . . </span>";//2页码后面用...代替部分未显示的页码
if (dqPage+1 == pageCount) {//当前页+1等于总页码
for(i = dqPage-1; i <= pageCount; i++){//“...”后面跟三个页码当前页居中显示
if (i == dqPage) {
item += "<span class='disabled'>"+i+"</span>";
}else{
item += "<a href='"+href+i+"' >"+i+"</a>";
}
}
}else if (dqPage == pageCount) {//当前页数等于总页数则是最后一页页码显示在最后
for(i = dqPage-2; i <= pageCount; i++){//...后面跟三个页码当前页居中显示
if (i == dqPage) {
item += "<span class='disabled'>"+i+"</span>";
}else{
item += "<a href='"+href+i+"' >"+i+"</a>";
}
}
}else{//当前页小于总页数,则最后一页后面跟...
for(i = dqPage-1; i <= dqPage+1; i++){//dqPage+1页后面...
if (i == dqPage) {
item += "<span class='disabled'>"+i+"</span>";
}else{
item += "<a href='"+href+i+"' >"+i+"</a>";
}
}
item += "<span> . . . </span>";
}
$('#pageBtn').append(item);
return;
}
} });
<%-- 得到当前页--%>
<span id="dqPage" hidden="hidden" class="disabled1 current">${page}</span>
<%-- js控制的页码显示在这个div中--%>
<div id="pageBtn" style="width: auto;display:inline-block !important;height: auto;">
</div>

这是实现js控制页码显示的所有步骤,可能有点麻烦,后续会继续优化,当然现在网上也有很多分页插件,全凭个人喜好。

至于 “首页,上一页,下一页,末页,以及跳转页,这些就看各自的需求实现了(我是用el表达式控制的)”

希望可以帮到有需要的童鞋。。。

转载请标明出处!!

js实现前端分页页码管理的更多相关文章

  1. js+bootstrap实现分页页码

    制作page.jsp,在其他页码引入,只需把最外层的form标签的id设置为myForm: 其中 totalPages:共有多少页:totalElements:共有有多少条记录:currentPage ...

  2. 使用原生js实现前端分页功能

    背景: 从后台提取出来数据,在前端进行分页. 代码: user-manage.js window.onload = function(){ var result = { message : " ...

  3. js 前端分页空间控件

    现在web注重用户体验与交互性,ajax 提交数据的方式很早就流行了,它能够在不刷新网页的情况下局部刷新数据.前端分页多是用ajax请求数据(其他方式也有比如手动构造表单模拟提交事件等).通过js将查 ...

  4. 纯JS前端分页方法(JS分页)

    1.JS分页函数:开发过程中,分页功能一般是后台提供接口,前端只要传page(当前页码)和pageSize(每页最大显示条数)及对应的其他查询条件,就可以返回所需分页显示的数据. 但是有时也需要前端本 ...

  5. js前端分页之jQuery

    锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比 ...

  6. 分享非常好用的前端分页js工具类 灵活 简单易懂

    分享自己封装的前端分页js工具类  下面是默认样式效果截图 可以随意更改js及css 很灵活 /** * pageSize, 每页显示数 * pageIndex, 当前页数 * pageCount 总 ...

  7. Django中使用JS通过DataTable实现表格前端分页,每页显示页数,搜索等功能

    Django架构中自带了后端分页的技术,通过Paginator进行分页,前端点击按钮提交后台进行页面切换. 优缺点:后端分页对于数据量大的场景有其优势,但页面切换比较慢. 后端分页python3代码如 ...

  8. 前端分页(js)

    //前端分页 var limit = 10; //每页显示数据条数 var total = $('#host_table').find('tr').length; var allPage = tota ...

  9. 纯Jquery前端分页

    ---恢复内容开始--- 由于之前自己做过jquery分页,就是调用jni接口时,只能用前台分页解决显示问题.最近看到有人提这样的问题:一个请求传过来上万个数据怎么办?于是萌生了写这篇博客的想法. 效 ...

随机推荐

  1. JavaScript Object对象

    目录 1. 介绍:阐述 Object 对象. 2. 构造函数:介绍 Object 对象的构造函数. 3. 实例属性:介绍 Object 对象的实例属性:prototype.constructor等等. ...

  2. Matlab数值计算示例: 牛顿插值法、LU分解法、拉格朗日插值法、牛顿插值法

    本文源于一次课题作业,部分自己写的,部分借用了网上的demo 牛顿迭代法(1) x=1:0.01:2; y=x.^3-x.^2+sin(x)-1; plot(x,y,'linewidth',2);gr ...

  3. ubuntu系统下如何修改host

    Ubuntu系统的Hosts只需修改/etc/hosts文件,在目录中还有一个hosts.conf文件,刚开始还以为只需要修改这个就可以了,结果发现是需要修改hosts.修改完之后要重启网络.具体过程 ...

  4. MSYS2——Windows平台下模拟linux环境的搭建

    最近从MSYS1.0迁移到了MSYS2.0,简单讲,MSYS2.0功能更强大,其环境模拟更加符合linux.虽然本身来自cygwin,但其集成了pacman软件管理工具,很有linux范,并且可以直接 ...

  5. FineBI:一个简单易用的自助BI工具

    过去,有关企业数据分析的重担都压在IT部门,传统BI分析更多面向的是具有IT背景的人员.但随着业务分析需求的增加,很多公司都希望为业务用户提供自助分析服务,将分析工作落实到业务人员手中.但同时,分析工 ...

  6. 报错:You need to use a Theme.AppCompat theme (or descendant) with this activity.

    学习 Activity 生命周期时希望通过 Dialog 主题测试 onPause() 和 onStop() 的区别,点击按钮跳转 Activity 时报错: E/AndroidRuntime: FA ...

  7. 【转】Android开发中让你省时省力的方法、类、接口

    转载 http://www.toutiao.com/i6362292864885457410/?tt_from=mobile_qq&utm_campaign=client_share& ...

  8. shell之sort命令

    1 sort的工作原理 sort将文件的每一行作为一个单位,相互比较,比较原则是从首字符向后,依次按ASCII码值进行比较,最后将他们按升序输出. [rocrocket@rocrocket progr ...

  9. 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...

  10. C#单元测试面面观

    标题有点标题党,但相信各位看完这篇文章一定会所收获,如果之前没有接触过单元测试或了解不深通过本文都能对单元测试有个全新认识.本文的特点是不脱离实际,所测试的代码都是常见的模式. 写完这篇文章后,我看了 ...