JS实现分页功能

​分页在网页上是一个很常见的功能,今天我们来实现一个新闻列表,包含了分页的功能,效果如下:

那么如何来实现这个功能呢?

一:html和css如下所示,就不多说了

html:

<div class="main">
    <!--新闻容器-->
    <div class="new-main"></div>
    <!--分页容器-->
    <div class="pagination-container">
        <span class="page-change prev">上一页</span>
        <div class="pagination"></div>
        <span class="page-change next">下一页</span>
    </div>
</div>

css:

body{
    background-color: #f8f8f8;
}
.new-main{
    width: 40%;
    margin: 100px auto 20px;
    padding: 15px;
    background-color: #fff;
}
.new-main .item{
    margin-bottom: 20px;
}
.new-main .item-title{
    text-align: left;
    padding: 15px;
    font-weight: bold;
    font-size:18px;
}
.pagination-container{
    text-align: center;
}
.pagination{
    display: inline-block;
}
.pagination a{
    background-color: #999;
    color: #fff;
    padding: 1px 6px;
    text-decoration:none;
    border-radius: 5px;
    margin-right: 10px;
    cursor:pointer;
}
.pagination a.active{
    background-color: #85D1FF;
}
.page-change{
    margin: 0 15px;
    cursor:pointer;
}
.skip input{
        width: 50px;
}

二:JavaScript的实现

1,这是准备渲染新闻列表的数据

let newsData = [
    {
    title:'美国科技巨头"花式劝退"老员工,数万人丢掉饭碗',
    content:'在数十年前称霸业界的时代,IBM在美国的员工人数曾一度增至25万。'
},
    {
        title:'央视名嘴贺炜8连红变彩神 命中11场比赛带彩民致富',
        content:'2019年8月1日,周中足彩比赛火热进行中,在今天上午结束的两场解放者杯比赛中'
    },
    {
        title:'53岁巩俐为新戏现身女排集训 紧盯郎平认真做笔记',
        content:'当天的巩俐穿着非常普通,而且没有化妆,看起来非常低调'
    },
    {
        title:'郎朗回应没帮老婆拿行李:以后得多帮她提些',
        content:'郎朗与妻子吉娜·爱丽丝现身机场'
    },
    {
        title:'以身试菌”的疯狂科学家',
        content:'几十年来,主流学说一直认为胃溃疡主要是由于压力过大、吃太多辛辣食物和胃酸过多引起的。'
    },
    {
        title:'詹皇回应被喷:黑够了吧 皇冠被玩弄太久我该爆发了',
        content:'他看儿子比赛时的激动反应被一些专家质疑“抢戏博关注”'
    },
    {
        title:'格里芬:围绕詹姆斯建队很无趣 夺冠后就想离开',
        content:'从2014-2017,格里芬在骑士队完成了多笔出色的运作'
    },
    {
        title:' 《哪吒》票房超《疯狂动物城》,位列中国影史动画电影票房第一',
        content:'哪吒之魔童降世》的累积票房破15.28亿,打破由《疯狂动物城》保持的分账票房15.27705亿元累计综合票房纪录,登顶新冠军。'
    },
    {
        title:' 浓眉哥赤膊苦练!训练机器纪录被打破,湖人二当家霸气秀肌肉',
        content:'北京时间8月1日,浓眉哥继续今夏的苦练'
    },
    {
        title:' 新疆男篮大外援人选确定 阿的江的选择让人意外!',
        content:'这两天CBA似乎掀起了夏季转会的高潮,包括辽宁男篮在内的冲冠集团都开始确定外援'
    },
    {
        title:' 乔家大院被摘牌后:晋中市委书记要求彻查整改,尽快再创5A',
        content:'山西省晋中市乔家大院景区在被文化和旅游部取消旅游景区质量等级次日,晋中市召开专题会议研究部署整改工作等。'
    },
    {
        title:' 大族激光低开逾9% 股价创逾两年新低',
        content:'大族激光低开逾9%,股价创逾两年新低。公司公告为董事长不当言论致歉,同时公司称欧洲研发中心项目主体建筑已经建成,预计在2020年底竣工。'
    },
    {
        title:' 捡漏悍将!快船又升级,夺冠赔率第一超湖人,仍留位抢FMVP?',
        content:'北京时间8月2日,根据ESPN名记沃纳洛夫斯基的报道,雷霆正式买断了大前锋帕特里克·帕特森,而帕特森在过了澄清期之后计划加盟快船。'
    },
    {
        title:' 又将有两名NBA球员加盟CBA?其中一位还是勇士总冠军成员',
        content:'北京时间8月1日,据国内媒体报道,辽宁队主帅郭士强表示正在球队考察小外援,前洛杉矶湖人队球员兰斯-史蒂芬森是候选人之一。'
    }

];

2,获取元素

let newMain = document.querySelector('.new-main');//新闻容器
let pagination =  document.querySelector('.pagination');//分页容器
let pageCount = Math.ceil(newsData.length/5); //根据数据的长度计算总共几页
let newsDataRender = [];//每页要显示的数据
let p = 1;//根据p值显示每页的数据

3,渲染初始化页面

//渲染页面函数
let render = ()=>{
    newMain.innerHTML = ' ';
   newsDataRender = newsData.slice((p-1)*5,5*p); //每页要显示的数据,一页显示5条
   newsDataRender.forEach((item,index)=>{
       newMain.innerHTML += ` <div class="item">
    <div class="item-title">${item.title}</div>
    <div class="item-content">
        ${item.content}    </div>
</div>`;
   });
};
//初始化页面
render();

4,渲染分页结构

//渲染分页
for(let i = 1;i<=pageCount;i++){
    pagination.innerHTML +=`<a>${i}</a>`;
}
pagination.innerHTML +=`<span class="skip">跳转至 <input type="text"> </span>页`;//获取页数
let asAll = pagination.querySelectorAll('a');
//页面刚进来时第一页高亮
asAll[p-1].classList.add('active');

5,选择页数,实现点击某页就到哪页的功能

//遍历总页数
asAll.forEach((item,index)=>{
//点击页数
    item.onclick = function () {
        for(let j=0;j<asAll.length;j++){
            asAll[j].classList.remove('active');
        }
      this.classList.add('active');
        p=index+1; //点击页数,改变p的值,以改变这个页面要显示的数据,达到分页的效果
        render(); //重新渲染页面
    }
});

6,按enter键实现跳转到某页的功能

//获取跳转input框
let skipInput = document.querySelector('.skip input');
//触发enter键实现跳转到输入页
skipInput.onkeydown = function (ev) {
if(ev.keyCode==13 && skipInput.value != '') {//移除每个页数按钮的activefor(let j=0;j<asAll.length;j++){
            asAll[j].classList.remove('active');
        }
p  = ev.target.value;
//给当前的页数按钮添加上active        asAll[p-1].classList.add('active');
        if( p>asAll.length){
            return;
        }//重新渲染页面render();
    }
};

7,实现上一页下一页的功能

//点击上一页下一页,改变高亮
let changePageClass = ()=>{
    for(let j=0;j<asAll.length;j++){
        asAll[j].classList.remove('active');
    }
    asAll[p-1].classList.add('active');
};
//上一页
let prev = document.querySelector('.prev');
prev.onclick = function (e) {
        if(p<=1){
            console.log(p);
            return;
        }else{
            p=p-1;
            changePageClass();
            render();
        }
};
//下一页
let next = document.querySelector('.next');
next.onclick = function () {
    if(p>=asAll.length){
        return;
    }
    p=p+1;
    changePageClass();
    render();
}

  到此为止,一个传统的分页功能就实现了,如有更好的实现方式,欢迎交流。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端入门学习

如何从请求、传输、渲染3个方面提升Web前端性能

什么是WEB前端呢?就是用户电脑的浏览器所做的一切事情。我们来看看用户访问网站,浏览器都做了哪些事情:

10510
来自专栏微卡智享

.net Core中Vue.js里使用Element-UI

每次自己尝试用新东西时,所花的时间真的不是一般的多,以前刚开始学Vue的时候用VSCode直接引入ElementUI比较简单,这次项目因为用.net Core生...

13530
来自专栏前端自习课

【React】196-React中使用CSS的7种方式(应该是最全的)

引入react内部已经支持了后缀为scss的文件,所以只需要安装node-sass即可,因为有个node-sass,scss文件才能在node环境上编译成css...

13220
来自专栏前端自习课

【CSS】205-CSS的“层”峦“叠”翠

提起,z-index大家脑海里可能会立刻浮现这样的知识点:“z-index的值大小控制元素在Z轴上显示的层级,z-index越大显示的层级越高(也就是在最上层,...

8120
来自专栏ytkah

wordpress默认css样式class和id集合

  你是否想过如何设计WordPress主题的不同元素?每个主题都不一样,但是有一些CSS的class和id是由WordPress生成的。我们将逐一介绍一些最重...

10540
来自专栏Flutter笔记

Flutter 数据监听Widget

给定ValueListenable 一个泛型和一个构建器,它从泛型的具体值构建小部件,这个类将自动注册为ValueListenable 的侦听器,并在值更改时用...

27230
来自专栏前端自习课

【CSS】202-23个CSS垂直居中技巧汇总

自古以来(是有多?~),网页CSS的垂直居中需求始终没有停过,而其困难度也始终没有让人轻松过,经过了每位开发先烈的研究后,据说CSS的垂直居中技巧已达到近十种之...

9920
来自专栏浪子编程走四方

让div水平垂直居中的几种方法

利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。使用 CSS 实现水平居中很容易,但要实现垂直居中并不容易。而且有些方法在一些...

10820
来自专栏忽如寄的前端周刊

Webpack系列——手把手教你使用Webpack搭建简易的React开发环境

在这篇文章中我们开始利用我们之前所学搭建一个简易的React开发环境,用以巩固我们之前学习的Webpack知识。首先我们需要明确这次开发环境需要达到的效果:1、...

7830
来自专栏python爱好部落

从0开始做系统之前端

做前端,我们一般要掌握三方面的知识:html,CSS 和javascript。 html负责搭建基础,就像人类的骨架。 CSS负责布局和美化,就像人类的肌肉和皮...

11720

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励