页页码的前端显示的实现

最新推荐文章于 2024-05-12 02:51:31 发布
最新推荐文章于 2024-05-12 02:51:31 发布
阅读量1.5k 收藏 4
点赞数 1
文章标签： js

页页码的前端显示的实现

原创  2016年08月16日 22:39:55
  • 1739

分页页码的前端显示实现

效果说明

准备做分页的时候滚回去找了一下之前写过的demo结果被自己写的丑哭了（大概长这样）： 
 
主要是不符合现在一般网站的跳转习惯，自己用着都觉得不方便，所以重新写了一下新的分页的前端（顿时觉得舒服了许多）： 

js思路

首先要明确，只需要知道当前页是第几页以及总页数理论上就可以去判断前端到底是怎么显示的。（分别是currentPage与pageNum） 
那么接下来需要确定基本的显示例子。 
特征：最前是上一页的按钮，最后是下一页的按钮。中间最多有7个按钮+两个省略号，根据情况的不同需要隐藏不同的部分 

具体的简单的html<置于body中>:


    <button class="btn" id="prePage">上一页</button>
    <button class="btn" id="btn1">1</button>
    <span id="prePoint">...</span>
    <button class="btn" id="btn2"></button>
    <button class="btn" id="btn3"></button>
    <button class="btn" id="btn4"></button>
    <button class="btn" id="btn5"></button>
    <button class="btn" id="btn6"></button>
    <span id="sufPoint">...</span>
    <button class="btn" id="btn7"></button>
    <button class="btn" id="sufPage">下一页</button>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

然后是js（这里用的依然是jquery）：

$(function(){
        var currentPage=Number(20);
        var pageNum=Number(50);

        //给每个button赋值（第一个默认为1）
        $("#btn2").text(currentPage-2);
        $("#btn3").text(currentPage-1);
        $("#btn4").text(currentPage);
        $("#btn5").text(currentPage+1);
        $("#btn6").text(currentPage+2);
        $("#btn7").text(pageNum);

        //可改变当前页的button样式
        $("#btn4").css("background-color","#ff6384"); 

        //先处理"上一页"和"下一页"的情况
        if(currentPage==1)  //如果当前页为首页
        {
            $("#prePage").hide();  
        }

        if(currentPage==pageNum)    //如果当前页为末页
        {
            $("#sufPage").hide();
        }

        //处理当前页小于等于3的特殊情况
        if(currentPage<=3){
            $("#prePoint").hide();
            $("#btn1").hide();
        }//当前页是4还需要hide掉第一个省略号按钮（！重要）
        else if(currentPage==4){
            $("#prePoint").hide();
        }
        //当前页是1还需要hide掉第二第三个按钮
        if(currentPage==1)
        {
            $("#btn2").hide();
            $("#btn3").hide();
        }
        //当前页是2则也需要hide掉第二个按钮（此时为-1）
        else if(currentPage==2)
        {
            $("#btn2").hide();
        }

        //最末端的特殊情况处理和最前端是一样的
        if(currentPage>=pageNum-2){
            $("#sufPoint").hide();
            $("#btn7").hide();
        }
        else if(currentPage==pageNum-3){
            $("#sufPoint").hide();
        }

        if(currentPage==pageNum)
        {
            $("#btn5").hide();
            $("#btn6").hide();
        }

        if(currentPage==pageNum-1)
        {
            $("#btn6").hide();
        }
    });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66

完整的代码

css

    ul{
        height:100%;
        list-style-type:none;
    }

    li{
        line-height:40px;
        float:left;
    }
    .page_btn{
        border-radius:4px;
        border:1px solid #e5e9ef;
        background:#fff;
        margin-right:10px;
        text-align:center;
        width:38px;
        height:38px;
        line-height: 8px;
        margin-top:6px;
        outline:0;
    }

    .page_btn:hover{
        border:1px solid #4f90fb;
        color:#4f90fb;
    }

    span.pages_span{
        margin-right:10px;
        width:38px;
        height:38px;
        position:relative;
        top:10px;
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

html

<ul>
    <li class="page_li">
        <button class="page_btn" style="width:100px" id="prePage">上一页</button>
    </li>
    <li class="page_li">
        <button class="page_btn" id="page_btn1">1</button>
    </li>
    <li class="page_li">
        <span class="pages_span" id="prePoint">...</span>
    </li>
    <li class="page_li">
        <button class="page_btn" id="page_btn2"></button>
    </li>
    <li class="page_li">
        <button class="page_btn" id="page_btn3"></button>
    </li>
    <li class="page_li">
        <button class="page_btn" id="page_btn4"></button>
    </li>
    <li class="page_li">
        <button class="page_btn" id="page_btn5"></button>
    </li>
    <li class="page_li">
        <button class="page_btn" id="page_btn6"></button>
    </li>
    <li class="page_li">
        <span class="pages_span" id="sufPoint">...</span>
    </li>
    <li class="page_li">
        <button class="page_btn" id="page_btn7"></button>
    </li>
    <li class="page_li">
        <button class="page_btn" style="width:100px" id="sufPage">下一页</button>
    </li>
</ul>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

js

$(function(){
        var currentPage=Number(20);
        var pageNum=Number(50);

        $("#page_btn2").text(currentPage-2);
        $("#page_btn3").text(currentPage-1);
        $("#page_btn4").text(currentPage);
        $("#page_btn5").text(currentPage+1);
        $("#page_btn6").text(currentPage+2);
        $("#page_btn7").text(pageNum);


        $("#page_btn4").css("background-color","#4f90fb");
        $("#page_btn4").css("border","1px solid #ddd");
        $("#page_btn4").css("color","#fff");


        if(currentPage==1)  
        {
            $("#prePage").hide();  
        }

        if(currentPage==pageNum)    
        {
            $("#sufPage").hide();
        }


        if(currentPage<=3){
            $("#prePoint").hide();
            $("##page_btn1").hide();
        }
        else if(currentPage==4){
            $("#prePoint").hide();
        }

        if(currentPage==1)
        {
            $("##page_btn2").hide();
            $("##page_btn3").hide();
        }
        else if(currentPage==2)
        {
            $("##page_btn2").hide();
        }

        if(currentPage>=pageNum-2){
            $("#sufPoint").hide();
            $("##page_btn7").hide();
        }
        else if(currentPage==pageNum-3){
            $("#sufPoint").hide();
        }

        if(currentPage==pageNum)
        {
            $("#page_btn5").hide();
            $("#page_btn6").hide();
        }

        if(currentPage==pageNum-1)
        {
            $("#page_btn6").hide();
        }
    });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/bobbyzyl12/article/details/52225716
mr_zheng0_0
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端打印时js分页实现共几页和第几页
08-06
js前端打印s分页实现共几页和第几页功能，触底自动换页，并每页表头新增固定部分，包括金额大写转换和当前时间获取
Web前端：JavaScript最强总结 附详细代码 （带常用案例！）
热门推荐
BudingCode的博客
03-30 8万+
JavaScript 是脚本语言，是一种解释性脚本语言(代码不进行预编译)
2024年Web前端最新利用VUE实现打印功能，大厂面试必备技能问题
最新发布
2401_84617969的博客
05-12 1154
排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。添加学生信息。打印全局。label=“学生ID”
前端分页显示有限页码实现逻辑
花开归矣的博客
11-07 1230
1.一共展示10个页码，能够达到前5后4的效果 2.如果前边不够5个，后边补齐10个 3.如果后边不足4个，前边补齐10个 // 定义页码开始位置begin,结束位置 end var begin; // 开始位置 var end ; // 结束位置 //1.要显示10个页码 if(page.totalPage < 10){ //总页码不够10页 begin = 1; end...
-后端数据分页和前端显示分页结果
杨鑫的博客
01-17 7557
1、简介 在其他框架中，分页是件非常痛苦的事，Laravel的分页器集成了查询构建器和Eloquent ORM，并且开箱提供了方便的、易于使用的、基于数据库结果集的分页。分页器生成的HTML兼容Bootstrap CSS 框架。 2、基本使用 基于查询构建器进行分页 有多种方式实现分页，最简单的方式就是使用查询构建器或Eloquent模型的paginate方法。该方法基
前后端分离实现分页
m0_72376882的博客
08-17 549
前后端分离实现分页功能
前端导出多页pdf 带目录 页眉 页脚及页码
08-23 1万+
前段时间公司发布新需求，要求用户点击按钮可以导出pdf或者html到本地，pdf中要包含可点击跳转的目录，要分页记录页码，还有页眉和页脚，和后台的小哥哥配合试了好多方法，最终完成的效果还不错，在这里做个记录。 需求 点击导出html报告，则导出html文件到本地 点击导出pdf报告，则导出pdf到本地 言归正传 因为设计也比较给力，直接把pdf样式设计成模板了， 所以前端的工作就是按照...
js实现前端分页页码管理
11-27
用JS实现前端分页页码管理，可以很美观的区分页码显示（这也是参考大多数网站的分页页码展示），能够有很好的用户体验，这也是有业务需要就写了一下，还是新手，经验不足，欢迎指出批评！ 首先先看效果图： 这是初始...
JS实现前端动态分页码代码实例
10-15
本文将详细介绍如何使用JS实现前端动态分页码，以及相关的代码实例。 首先，前端动态分页的核心在于根据当前页码（curPage）和总页码（pageTotal）来动态生成和更新分页导航。通常，分页码会显示“上一页”、...
Python Django 页面上展示固定的页码数实现代码
09-18
如果当前页码减去一半小于等于1，说明我们需要从第一页开始显示页码；如果当前页码加上一半大于总页数，我们需要从总页数减去`max_page`的值开始显示，以确保页码列表不超出总页数的范围。 最后，`page_html`的生成...
纯JS前端实现分页代码
11-25
在前端开发中，分页是一种常见的功能，用于处理大量数据的显示，避免一次性加载过多内容导致页面卡顿或用户浏览不便。在这个场景中，我们讨论的是如何使用纯JavaScript实现前端分页，不依赖任何第三方库或插件。下面...
html+css实现简单分页页码效果
04-19
html+css实现简单分页页码效果源码，尚且没有复杂的后台，给前端新手学习之用
前端分页实现demo
09-13
前端分页实现思路，采用java在控制台输出，可替换相应的输出为html，即实现前端的分页输出，输出的页号只依赖与当前页号和总页数
VUE前端娱乐版分页
JayVergil的博客
12-07 933
在自己的ceshi demo中 分页必须有以下元素：当前页数：thispage，用来控制第几页总页数：sumpage，用来查询总共要分多少页页码：showsize，用来控制需要分多少页，就是一页显示多少条的意思声明属性：  data: {             arr: [],             //当前页             thispage:1,             //总页...
怎么实现列表分页功能，并且给前端返回总条数和总页数
qq_41979882的博客
09-09 7491
重点： 1、数据库:Mysql ==> MySQL用的是limit进行分页查询 代码示例: 语句1：select * from student limit 0,10 // 语句1和2均返回表student的前10行 ，语句1 ：第一个参数表示从该参数的下一条数据开始查询，第二个参数表示每次返回的数据条数。 语句2：select * from student limit 10 offset 0 //语句2 ：第二个参数表示从该参数的下一条数据开始查询，第一个参数表...
对后台有分页的数据进行前端分页
weixin_37842682的博客
08-09 4848
和之前的那篇布局是一样的，功能是可以实现的，但总觉得封装函数方面还可以再改进一下 CSS部分 &lt;style&gt; .content{ width: 400px; margin:0 auto; } .fenye{ width: 100%; text-align: center; } ...
前后端交互(tomcat)如何在前端做出分页效果
bxq2195294335的博客
07-08 747
首先,后端方面,我们首先要写一个实体类,专门用来定义分页 这样定义完一个实体类的分页类后,我们就可以写后端代码,通过sql语句来进行操作,获取各个属性, 这个sql语句用来获取每一页的用户数据,当前的页数和每页的数量都是前端传来的数据 此sql语句是为了获取一共有几条数据在数据库里,现在dao包里的方法已经写完了,现在去写service包里的方法 现在则要去书写控制端的代码,来完成后端和前端的数据交互 现在后端的代码已经全部书写完了,接下来则只需要吧后端完成的数据给前端,进行前端的数据展示...
前端如何实现点击页码切换图片
05-03
实现点击页码切换图片，可以考虑以下步骤： 1. 定义一个包含所有图片的数组，每个数组元素都是一个图片的路径。 2. 定义一个变量来表示当前显示的图片的索引，初始值为0。 3. 定义一个函数，用于切换图片。该函数接受一个参数表示要显示的图片的索引。在函数中，先将当前显示的图片隐藏，然后将要显示的图片显示出来，并更新当前显示的图片的索引。 4. 在HTML中创建一个包含页码的容器，并添加相应的页码按钮。 5. 添加事件监听器，当用户点击页码按钮时，调用切换图片函数并传入对应的索引。 以下是一个示例代码： HTML代码： ```html <div id="image-container"> <img src="img1.jpg" class="image"> <img src="img2.jpg" class="image" style="display:none;"> <img src="img3.jpg" class="image" style="display:none;"> </div> <div id="page-container"> <button class="page-button">1</button> <button class="page-button">2</button> <button class="page-button">3</button> </div> ``` CSS代码： ```css .image { max-width: 100%; height: auto; } #page-container { display: flex; } .page-button { margin: 0 10px; padding: 5px 10px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; cursor: pointer; } .page-button.active { background-color: #ccc; color: #fff; } ``` JavaScript代码： ```javascript var images = ['img1.jpg', 'img2.jpg', 'img3.jpg']; var currentIndex = 0; function switchImage(index) { var imageContainer = document.getElementById('image-container'); var images = imageContainer.getElementsByClassName('image'); images[currentIndex].style.display = 'none'; images[index].style.display = 'block'; currentIndex = index; } var pageButtons = document.getElementsByClassName('page-button'); for (var i = 0; i < pageButtons.length; i++) { pageButtons[i].addEventListener('click', function() { var index = parseInt(this.innerText) - 1; switchImage(index); for (var j = 0; j < pageButtons.length; j++) { pageButtons[j].classList.remove('active'); } this.classList.add('active'); }); } ``` 首先定义了一个包含所有图片路径的数组和一个表示当前显示图片索引的变量。然后定义了切换图片的函数switchImage，该函数接受一个参数表示要显示的图片索引。在函数中，先将当前显示的图片隐藏，然后将要显示的图片显示出来，并更新当前显示的图片索引。 接下来，在HTML中创建了一个包含页码按钮的容器，并添加了点击事件监听器。当用户点击页码按钮时，调用切换图片函数switchImage并传入相应的索引。同时，将被点击的页码按钮标记为active状态，以提供视觉反馈。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值