分页中的功能（点击页数跳转）（如侵权就删）

IKUNzhenin

于 2023-09-23 08:59:03 发布

阅读量118

点赞数

分类专栏： js中的功能的特性 js练手功能文章标签：前端 javascript

本文链接：https://blog.csdn.net/IKUNzhenin/article/details/133196826

版权

js中的功能的特性同时被 2 个专栏收录

63 篇文章 0 订阅

订阅专栏

js练手功能

59 篇文章 0 订阅

订阅专栏

这是一个HTML页面，实现了数据分页功能。该页面包含了10个示例数据，具有.item类名的<div>标签。页面中还有一个空的<ul>标签，类名为.pagination，用于存放分页链接。分页链接根据页面内展示的数据进行生成，以方便用户在多页数据中快速浏览和定位到目标数据。

该页面使用了JavaScript代码，实现了数据分页的功能。当页面加载完成后，通过DOM操作获取到所有.item类名的<div>标签，并将它们分成每一页展示的数据。然后，使用JavaScript创建分页链接，并在点击链接后切换到相应的页面数据。

在样式方面，使用了CSS编写样式，使分页链接列表看起来更加美观。整个页面有良好的交互性和可读性，方便用户进行数据分页浏览。

这是一个使用JavaScript操作DOM元素实现分页功能的代码段。该代码段通过监听DOMContentLoaded事件，获取页面中指定的数据、分页元素，并定义当前页码和每页显示的数据量等变量。通过showPage函数，根据当前页码和每页数据量计算出数据的起止位置，然后循环遍历所有数据元素，根据其位置决定是否显示或隐藏该数据元素。这样，就能在页面上实现分页功能，使用户能够快速浏览指定数据。

window.addEventListener('DOMContentLoaded', function() {
               let currentPage = 1;
               let itemsPerPage = 5;
               let items = document.querySelectorAll('.item');
               let pagination = document.querySelector('.pagination');

               function showPage(page) {
                   let startIndex = (page - 1) * itemsPerPage;
                   let endIndex = startIndex + itemsPerPage - 1;

                   for (let i = 0; i < items.length; i++) {
                       if (i >= startIndex && i <= endIndex) {
                           items[i].style.display = 'block';
                       } else {
                           items[i].style.display = 'none';
                       }
                   }
               }

这是一个使用JavaScript创建分页链接的代码段。该代码段通过计算数据总数和每页数据量，得出总页数并循环生成相应数量的分页链接。每个分页链接都包括一个<a>标签和一个<li>标签，其中<a>标签作为链接地址可以点击跳转到相应的分页，<li>标签则用于包装分页链接。在生成分页链接的过程中，如果当前页码和生成的链接页码相同，该链接所在的<li>标签将会被添加.active类名，以便在视觉上表示出当前所在的分页。每个分页链接的点击事件都被绑定到一个匿名函数上，该函数会根据点击的链接页码更新当前页码并重新渲染页面。同时，它会寻找当前被标记为.active的<li>标签并移除该类名，然后将该类名添加到点击的<li>标签上，以显示当前所在分页。这样就能在页面底部创建指定数量的分页链接，为用户提供快速跳转到对应页码的功能。

function createPaginationLinks() {
let pageCount = Math.ceil(items.length / itemsPerPage);

                   for (let i = 1; i <= pageCount; i++) {
                       let link = document.createElement('a');
                       link.href = '#';
                       link.textContent = i;

let listItem = document.createElement('li');
listItem.appendChild(link);

pagination.appendChild(listItem);

                       if (i === currentPage) {
                           listItem.classList.add('active');
                       }

                       link.addEventListener('click', function(e) {
                           e.preventDefault();
                           currentPage = parseInt(this.textContent);
                           showPage(currentPage);

                           let activeLink = pagination.querySelector('.active');
                           activeLink.classList.remove('active');
                           this.parentElement.classList.add('active');
                       });
                   }
               }

showPage(currentPage);
createPaginationLinks();
});

这是一个HTML页面的代码段，它包含了10个具有.item类名的<div>标签，以及一个空的<ul>标签，类名为.pagination，用于存放分页链接。这些<div>标签实际上是一些示例数据，可以是任何你想在页面上展示的内容，例如文章列表、商品列表等等。而分页链接则根据页面内展示的数据进行生成，以方便用户在多页数据中快速浏览和定位到目标数据。该HTML页面可以与前面所提到的使用JavaScript创建分页链接的代码段一起使用，实现数据分页功能。

然后就是总代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <title>document</title>
       <style>
           .pagination {
               display: flex;
               list-style: none;
               padding: 0;
           }

           .pagination li {
               margin-right: 10px;
           }

           .pagination li a {
               display: block;
               padding: 5px 10px;
               background-color: #f1f1f1;
               color: #333;
               text-decoration: none;
           }

           .pagination li a:hover {
               background-color: #ddd;
           }

           .pagination .active a {
               background-color: #333;
               color: #fff;
           }
       </style>

               function showPage(page) {
                   let startIndex = (page - 1) * itemsPerPage;
                   let endIndex = startIndex + itemsPerPage - 1;

function createPaginationLinks() {
let pageCount = Math.ceil(items.length / itemsPerPage);

                   for (let i = 1; i <= pageCount; i++) {
                       let link = document.createElement('a');
                       link.href = '#';
                       link.textContent = i;

let listItem = document.createElement('li');
listItem.appendChild(link);

pagination.appendChild(listItem);

                       if (i === currentPage) {
                           listItem.classList.add('active');
                       }

               showPage(currentPage);
               createPaginationLinks();
           });
       </script>
   </head>

效果图1

效果图：2

可以互相点击

最后谢谢大家的观看：

大佬勿喷

IKUNzhenin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分页中的功能（点击页数跳转）（如侵权就删）

这是一个HTML页面，实现了数据分页功能。该页面包含了10个示例数据，具有.item类名的标签。页面中还有一个空的标签，类名为.pagination，用于存放分页链接。分页链接根据页面内展示的数据进行生成，以方便用户在多页数据中快速浏览和定位到目标数据。该页面使用了JavaScript代码，实现了数据分页的功能。当页面加载完成后，通过DOM操作获取到所有.item类名的标签，并将它们分成每一页展示的数据。然后，使用JavaScript创建分页链接，并在点击链接后切换到相应的页
复制链接

扫一扫

专栏目录