js 文章数据分页展示

最新推荐文章于 2024-07-01 11:34:43 发布

xym_2000

最新推荐文章于 2024-07-01 11:34:43 发布

阅读量444

点赞数

文章标签： javascript html 前端 js

本文链接：https://blog.csdn.net/xym_2000/article/details/126304194

版权

本文详细介绍了如何使用JavaScript实现文章数据的分页展示，包括动态生成页码、点击分页按钮更新内容以及实现前后翻页功能。通过实例代码和详细注释，帮助前端开发者理解分页的实现过程。

摘要由CSDN通过智能技术生成

想加深JS功力的伙伴们,都逃不过分页按钮这个环节.

今天就用纯JS代码展示一下分页怎么写,希望能帮助到每个有志于编程学习的朋友.

上图是分页实例的大致效果图.

(2022年最详版代码加注释,非封装代码,破解你的所有疑问,我想再没有这么详细的注释了吧?)

再吐槽一句:N多for循环!想躲页躲不过!

重要定律:

每页数据下标最大值 = (页码值 - 1) * 每页数据条数

攻克目标:

1.动态生成页码:设置一个数组,根据数据多少计算生成相应的页码

2.实现点击下方分页页码,动态战术数据,即表格内容随页码改变而改变 (可以事先写成静态尝试一下)

3.实现前后上一页,下一页的翻页功能(页码样式跟着改变)

代码部分：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title> js分页数据 </title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #pagination{
            float: right;
            height: 100px;
            margin-top: 30px;
        }
        .clearfix{
            clear: both;
        }
        .tagBtn{padding: 12px 16px;border: 1px solid #f2f5f9;}
        .tagBtn:hover{background: #f2f5f9}
        .tagBtn:focus{background: #f2f5f9}
    </style>
</head>

<body oncontextmenu="window.event.returnValue=false"
      onkeypress="window.event.returnValue=false"
      onkeydown="window.event.returnValue=false"
      onkeyup="window.event.returnValue=false"
      ondragstart="window.event.returnValue=false"
      onselectstart="event.returnValue=false"
      class="custom-cursor">
<div class="custom-cursor__cursor"></div>
<div class="custom-cursor__cursor-two"></div&