开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

原生js实现分页

在原生 JavaScript 中实现分页，主要涉及到以下几个基础概念：

基础概念：

数据集合：要分页展示的数据数组。
每页显示数量：指定每个页面上显示的数据条数。
当前页码：表示用户当前查看的页面编号。

优势：

提升用户体验，避免一次性加载大量数据导致页面卡顿。
更好地控制数据的展示和管理。

类型：常见的有基于数组索引的分页和基于数据库查询的分页（在后端实现），这里说的是前端基于数组索引的分页。

应用场景：适用于数据量不是特别巨大，且在前端进行处理和展示的情况，比如一个简单的列表展示。

以下是一个原生 JavaScript 实现分页的示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .page-item {
      display: inline-block;
      padding: 5px 10px;
      border: 1px solid #ccc;
      margin-right: 5px;
      cursor: pointer;
    }

    .page-item.active {
      background-color: #007bff;
      color: white;
    }
  </style>
</head>

<body>
  <ul id="dataList"></ul>
  <div id="pagination"></div>

  <script>
    const data = []; // 假设这是要分页的数据数组
    for (let i = 1; i <= 100; i++) {
      data.push(`Item ${i}`);
    }

    const itemsPerPage = 10;
    let currentPage = 1;

    function renderPage(page) {
      const start = (page - 1) * itemsPerPage;
      const end = start + itemsPerPage;
      const pageData = data.slice(start, end);
      const dataList = document.getElementById('dataList');
      dataList.innerHTML = '';
      pageData.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item;
        dataList.appendChild(li);
      });
    }

    function renderPagination() {
      const totalPages = Math.ceil(data.length / itemsPerPage);
      const pagination = document.getElementById('pagination');
      pagination.innerHTML = '';
      for (let i = 1; i <= totalPages; i++) {
        const pageItem = document.createElement('span');
        pageItem.classList.add('page-item');
        pageItem.textContent = i;
        if (i === currentPage) {
          pageItem.classList.add('active');
        }
        pageItem.addEventListener('click', () => {
          currentPage = i;
          renderPage(currentPage);
          renderPagination();
        });
        pagination.appendChild(pageItem);
      }
    }

    renderPage(currentPage);
    renderPagination();
  </script>
</body>

</html>

在上述代码中：

首先创建了一个包含 100 个数据项的数组。
renderPage 函数用于根据当前页码渲染对应的数据到页面上。
renderPagination 函数用于生成并渲染分页按钮。

如果遇到分页数据显示不正确或者分页按钮不更新的问题，可能是以下原因：

计算起始和结束索引的逻辑有误，导致切片的数据范围不对。
更新当前页码后，没有重新调用渲染函数来更新页面显示。

解决方法就是仔细检查相关的计算逻辑和函数调用，确保在页码变化时正确地重新渲染数据和分页按钮。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

原生JS实现分页效果

做开发久了，会越来越依赖框架，毕竟利用框架可以快速的完成工作任务，如常见的分页效果，只需要与后端配合，由后端返回总页数和当前第几页这两个参数传给一些框架的分页功能，就可以轻松的实现分页效果，那如果在不依赖框的情况下利用原生...JS如何实现一个分页效果呢？...接下来给大家分享一段分页代码实现下面的效果。 ? 原生...JS实现分页效果 a { margin: 5px; }

12.4K1 0

原生JS实现酷炫分页

分享一个如下效果的JS分页特效，是不是很酷炫。以下是代码实现：原生...JS实现酷炫分页 * { margin: 0; padding: 0; }...-- 引入运动函数 --> js/move.js"> window.onload...var timer = setInterval(function () { //执行move.js

3.2K1 0

原生js版分页插件

之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件，今天简单改造了一下，改成了原生JavaScript版本的分页插件，可以自定义一些简单配置，特此记录下来。...自己实现的简单小插件，把分页部分的css样式写在了插件paging.js中，以动态创建style标签的方式，加入到页面中。...1、代码部分： 1.1、插件 - paging.js 分页的css样式写在插件中，动态创建style标签，加载到页面中。在该js中有一个Paging构造函数。...在构造函数中有两个参数，第一个是自定义分页参数的js对象，第二个是回调函数。在构造函数中有一个initPage()方法。用来渲染分页DOM结构。...DOCTYPE html> js版分页插件 <style

32.6K12 1

原生js+ajax分页组件

定义分页组件DOM 定义分页组件类及实例方法： // 分页组件类 function Pagination(_...ref) { this.id = _ref.id; //分页组件挂载的DOM节点 this.curPage = _ref.curPage || 1; //初始页码 this.draw...= _ref.draw; // 初始化分页请求次数 this.pageSize = _ref.pageSize || 5; //分页个数 this.pageLength =...this.pageTotal = 0; //总共多少页 this.dataTotal = 0; //总共多少数据 this.ajaxParam = _ref.ajaxParam; // 分页...else { li.className = 'disabled'; } this.ul.appendChild(li); }, //分页

7.7K2 0

JS实现分页功能

分页在网页上是一个很常见的功能，今天我们来实现一个新闻列表，包含了分页的功能，效果如下：那么如何来实现这个功能呢？...--分页容器--> 上一页...document.querySelector('.new-main');//新闻容器 let pagination = document.querySelector('.pagination');//分页容器...=asAll.length){ return; } p=p+1; changePageClass(); render(); } 到此为止，一个传统的分页功能就实现了...，如有更好的实现方式，欢迎交流。

16.1K2 0

JS 实现分页打印

在调用 window.print() 时，可以实现打印效果，但内容太多时要进行分页打印。...其中Auto是默认值，只有在有需要时，才需设定分页符号 (Page breaks)。...page-break-before 若设定成left，则会插入分页符号，直到指定的组件出现在一个左边的空白页上。...page-break-before 若设定成right，则会插入分页符号，直到指定的组件出现在一个右边的空白页上。 page-break-after 属性会将分页符号加在指定组件后，而非之前。...如果必要则在元素前插入分页符 always 在元素前插入分页符 avoid 避免在元素前插入分页符 left 在元素之前足够的分页符，一直到一张空白的左页为止 right 在元素之前足够的分页符，一直到一张空白的右页为止

14.2K2 1

js分页功能实现

实现一个js的分页并在弹出框中显示 1.分页插件使用：bootstarp-paginator.js,需要先引入bootstarp.js和jquery.js等； !...numberOfPages : 0, bootstrapMajorVersion:3 } 其中 bootstrapMajorVersion的值需要根据实际情况配置； 3、列表展示实现...'; $('.page-footer').html(page); $('#pageSize').val(pagination.number); //分页需要

4.6K1 0

原生JS实现哈希路由

页面代码在我们用前端框架的时候，经常用到路由技术，就是在地址栏确实发生了变化但是页面没有刷新，那么本文就介绍通过更改哈希的方式实现这样一种路由，下面是页面代码： Hash Router</h1

2.4K2 0

原生JS实现翻书特效

给大家分享一个用原生JS实现的翻书效果图，效果如下：实现代码如下，欢迎大家复制粘贴。原生JS实现翻书特效

20.4K0 1

原生 JS 实现复制功能

document.getElementById('target'); copyToClipboard(target.value); } copyToClipboard 方法用来实现复制功能...，实现过程：创建一个 span 选中span节点内容使用 document.execCommand('copy')将选中内容加入剪贴板

7.7K2 0

原生js实现on和emit

转载自：http://www.cnblogs.com/aisiqi-love/p/10594461.html

2.9K3 0

原生JS 实现元素排序

原生...JS 实现元素排序 * { margin: 0; padding:

3.3K3 0

原生js实现ajax方法

由于不想多引入一个 jquery，百度了一个原生 js 实现 ajax 的方法(超简单)，挺不错的，现在就分享给大家，也给大家做个参考。...首先新建一个 js 文件： function ajax(){ var ajaxData = { type:arguments[0].type || "GET", url:arguments...dataType:"json", data:{"val1":"abc","val2":123,"val3":"456"}, beforeSend:function(){ //some js

4K2 0

原生JS实现轮播图

分享一个用原生JS实现轮播图特效，效果如下：以下是代码实现，详情请看注释： <!...arr.children[1];//操作的箭头 var imgWid = screen.offsetWidth; // 1.总体分为两部分: // 2.实现简单轮播图...：点击按钮变色，list的运动 // 3.点击按钮变色：根据图片个数创建按钮,实现变色 // 4.左右焦点图：移入移出显示隐藏，点击运动 // 5.点击运动

8.7K2 0

原生JS实现魔方效果

给大家分享一个用原生JS实现的魔方效果，效果如下：以下是代码实现：原生JS实现魔方效果 <style type=

7.3K1 0

js分页

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div id="pg"...

5.1K2 0

原生js实现图片懒加载

如果 >=0 说明该元素在视口内，给元素的url赋值代码实现： <!

6.5K2 0

原生JS实现数码表特效

分享一个用原生JS实现的数码时钟特效，效果如下：上面的数字是用的图片生成的，共10张图片如下：实现代码如下，欢迎大家复制粘贴。原生...JS实现数码表特效 body { background: blue; color: white;

17K1 0

原生JS实现VR看图特效

那么这种效果是如何实现的呢？其实原理很简单，就是连续拍摄了多个角度的图片，然后根据用户的操作加载不同角度的图片。...以下是这个效果的代码实现，由于图片太多，就不一一上传了，大家多看注释，理解其原理即可。原生...JS实现VR看图特效 body { margin: 0; } img {

14.2K2 0

原生JS实现拖拽缩放元素

今天给大家分享一个用原生JS实现的拖拽缩放元素大小的Demo，效果如下：以下是代码实现，欢迎大家复制粘贴及吐槽。原生...JS实现拖拽缩放元素 #div1 { width: 11px; height: 11px;

5.5K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭