JavaScript实现分页效果

lavor 发布于2019-08-21 16:47 / 1732人阅读

摘要：在根据设置每页显示条数，计算出最大页码。是当前页码，默认设置为第一页包含个原型函数一个为一个为这个函数的作用是根据当前选中的页码来渲染。

初学前端不久，第一次写文章，希望大佬多多指教，谢谢！！
目的：实现一个分页点击事件的js组件特效，
效果如下：

录gif的软出了点问题，感觉鼠标不移动

代码实现：
html代码：

加上css后效果：

因为每次选中的页面在中间，则吧中间设置一个点击的class

JS实现：

function Paging(list_num,ali,btn){
    this.list_num=list_num;
    this.ali=ali;
    this.btn=btn;
    this.page=1;//定义一个当前页面的全局变量
    this.num=5;//每页文章数目
    this.page_num=Math.ceil(this.list_num/this.num);//根据文章数和每页显示数，向上取整算出页码数
    this.drc=[this.page-2,this.page-1,this.page,this.page+1,this.page+2];  
}

设置一个Paging的对象，传入形参文章数(list_num),页码按钮(ali)，上下页按钮(btn)。在根据设置每页显示条数，计算出最大页码。这里解释一下this.drc，因为中间的按钮是当前页码，则前面一页是当前页码减一，其他同理。this.page是当前页码，默认设置为第一页
Paging包含2个原型函数一个为init,一个为render这个函数的作用是根据当前选中的页码(this.page)
来渲染ali。
下面先来看下init函数：

init:function(){
        var self=this;
        //ali绑定点击事件
        for(var i=0,len=ali.length;i0&&this.drc[i]<=this.page_num){
                ali[i].innerText=this.drc[i];
            }else{
                ali[i].innerText="*";
            }
            ali[i].onclick=function(){
                var val=this.innerText;
                if(val%1===0){
                    self.page=parseInt(val);
                }else{
                    alert("请单击正确的页码");
                    return;
                }
                self.render();
            }
        }
        //给上一页、下一页添加点击事件
        btn[0].onclick=function(){
            self.page--;
            self.render();
        }
        btn[1].onclick=function(){
            self.page++;
            self.render();
        }
    }

因为html里面没有在li标签里面赋值，这里采用循环的方式赋值，在代码第六行的if判断里面，进过this.drc计算，如果出现值是比1小的或者比最页码(this.page_num)还大的情况吧值设置为※，意味这改页码不能点击。在代码 self.page=parseInt(val);这句中的parseInt函数非常关键，如果没有设置这后面页码生成会出现问题，这里的判断值能否与1整除，如果不能整除则知晓用户点击的是※，这时我们弹出对话框提示用户没有页码，并return。这里都是点击以后改变全局变量this.page然后调用render函数。
下面我们来看下render函数：

if(this.page<=0){
    alert("已经是列表的首页");
}else if(this.page>this.page_num){
    alert("已经是列表的最后一页");
}else{
    this.drc=[this.page-2,this.page-1,this.page,this.page+1,this.page+2];
    for(var i=0,len=ali.length;ithis.page_num){
            ali[i].innerText="*";
        }else{
            ali[i].innerText=this.drc[i];
        }
    }
}

这里代码很简洁，就是三个if判断分支语句，当页码小于0或者大于页码最大值的时候弹出窗口，当页码在1到最大页码之间的时候，进行ali的渲染，在for循环里面的if判断和前面的思路是一致的，均是当页码不在范围类赋值成‘*’,在范围内时，给其赋值。

下面是在js中调用这个对象

//文章数目，定义50篇
var list_num=50;
//ali，获取页码的DOM
var ali=document.getElementsByClassName("page_num");
//btn，获取上下2页的按钮
var btn=document.getElementsByClassName("list_btn");
var paging=new Paging(list_num,ali,btn);
paging.init();

当然这里也可以与ajax合用，设置一个分页的模块，向ajax传入参数获取数据，然后根据返回的json，设置显示内容

前端新手，希望各位大佬，多多留言，多多指教，谢谢！！

完整代码github：https://github.com/LiChangyi

云服务器专线服务 javascript实现分页分页easyui效果显示 js的分页效果实现分页

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88734.html

手把手教你用原生JavaScript造轮子（1）——分页器（最后更新：Vue插件版本，本篇Over！

摘要：使用构造函数那么有没有一种办法，可以不写函数名，直接声明一个函数并自动调用它呢答案肯定的，那就是使用自执行函数。日常工作中经常会发现有大量业务逻辑是重复的，而用别人的插件也不能完美解决一些定制化的需求，所以我决定把一些常用的组件抽离、封装出来，形成一套自己的插件库。同时，我将用这个教程系列记录下每一个插件的开发过程，手把手教你如何一步一步去造出一套实用性、可复用性高的轮子。 So, ...

CHENGKANG 2019-08-23 10:22 评论0 收藏0
Graphql实践——像axios一样使用Graphql

摘要：初始化项目使用初始化项目安装项目结构如下接口所有接口对封装接下来对进行封装，加上中间件实现类似于拦截器的效果。 Graphql尝鲜在只学习graphql client端知识的过程中，我们常常需要一个graphql ide来提示graphql语法，以及实现graphql的server端来进行练手。graphql社区提供了graphiql让我们使用 graphiql (npm)：一个交互...

mumumu 2019-08-22 18:24 评论0 收藏0
移动端h5轮播插件swipe

摘要：在移动端的页面里，我们经常会有轮播图的需求，如果不需要太多的效果，只是简单的手指滑动和自动轮换效果的话，我比较推荐插件，不过百度搜索到的这个插件，里面介绍的不是很完整，我给大家补充下可能需要的功能。在移动端的h5页面里，我们经常会有轮播图的需求，如果不需要太多的效果，只是简单的手指滑动和自动轮换效果的话，我比较推荐swipe插件，不过百度搜索到的这个插件，里面介绍的不是很完整，我给大...

zhangfaliang 2019-08-05 12:51 评论0 收藏0
移动端h5轮播插件swipe

摘要：在移动端的页面里，我们经常会有轮播图的需求，如果不需要太多的效果，只是简单的手指滑动和自动轮换效果的话，我比较推荐插件，不过百度搜索到的这个插件，里面介绍的不是很完整，我给大家补充下可能需要的功能。在移动端的h5页面里，我们经常会有轮播图的需求，如果不需要太多的效果，只是简单的手指滑动和自动轮换效果的话，我比较推荐swipe插件，不过百度搜索到的这个插件，里面介绍的不是很完整，我给大...

funnyZhang 2019-08-22 13:58 评论0 收藏0
移动端h5轮播插件swipe

摘要：在移动端的页面里，我们经常会有轮播图的需求，如果不需要太多的效果，只是简单的手指滑动和自动轮换效果的话，我比较推荐插件，不过百度搜索到的这个插件，里面介绍的不是很完整，我给大家补充下可能需要的功能。在移动端的h5页面里，我们经常会有轮播图的需求，如果不需要太多的效果，只是简单的手指滑动和自动轮换效果的话，我比较推荐swipe插件，不过百度搜索到的这个插件，里面介绍的不是很完整，我给大...

Juven 2019-08-29 14:16 评论0 收藏0