开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

纯js分页代码示例

以下是一个使用纯 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>纯 JS 分页示例</title>
  <style>
    .item {
      padding: 8px;
      border: 1px solid #ccc;
      margin-bottom: 4px;
    }

    .pagination {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }

    .pagination button {
      padding: 5px 10px;
      margin: 0 2px;
      border: 1px solid #ccc;
      background-color: #fff;
      cursor: pointer;
    }

    .pagination button.active {
      background-color: #007BFF;
      color: #fff;
      border-color: #007BFF;
    }
  </style>
</head>

<body>
  <div id="content"></div>
  <div class="pagination" id="pagination"></div>

  <script>
    // 要分页的数据
    const data = [];
    for (let i = 1; i <= 100; i++) {
      data.push(`项目 ${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 contentDiv = document.getElementById('content');
      contentDiv.innerHTML = '';
      pageData.forEach(item => {
        const div = document.createElement('div');
        div.className = 'item';
        div.textContent = item;
        contentDiv.appendChild(div);
      });
    }

    function renderPagination() {
      const totalPages = Math.ceil(data.length / itemsPerPage);
      const paginationDiv = document.getElementById('pagination');
      paginationDiv.innerHTML = '';

      for (let i = 1; i <= totalPages; i++) {
        const button = document.createElement('button');
        button.textContent = i;
        if (i === currentPage) {
          button.classList.add('active');
        }
        button.addEventListener('click', () => {
          currentPage = i;
          renderPage(currentPage);
          renderPagination();
        });
        paginationDiv.appendChild(button);
      }
    }

    // 初始渲染
    renderPage(currentPage);
    renderPagination();
  </script>
</body>

</html>

在上述示例中：

一、基础概念

数据切片
- 通过 Array.prototype.slice 方法根据当前页码和每页显示数量从原始数据数组中获取要显示的部分数据。

事件监听
- 为分页按钮添加 click 事件监听器，当按钮被点击时更新当前页码并重新渲染页面内容和分页按钮。

二、优势

简单直观
- 不依赖任何外部库，易于理解和实现。

定制性强
- 可以根据具体需求轻松修改样式、分页逻辑（如每页显示数量、特殊的分页样式等）。

三、应用场景

小型数据展示页面
- 当需要在网页上显示少量数据（如几十到几百条）且希望有分页功能时，这种纯 JavaScript 实现的方式足够使用。

学习示例
- 对于初学者来说，是学习分页逻辑和相关 JavaScript 操作的好例子。

四、可能遇到的问题及解决方法

性能问题（数据量较大时）
- 如果数据量非常大（例如数千条甚至更多），频繁地操作 DOM 可能会导致性能下降。
- 解决方法：可以考虑使用虚拟列表技术，只渲染可视区域内的元素，减少 DOM 操作次数。

兼容性问题
- 在一些非常老旧的浏览器中，可能存在对某些 JavaScript 方法（如 slice）支持不佳的情况。
- 解决方法：添加相应的兼容性代码或者使用 polyfill 来确保在所有目标浏览器中正常工作。

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

有帮助

没帮助

相关·内容

js代码与html代码分离示例

验证用户名是否存在的示例代码引出该思想： ---- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding...="text/html; charset=UTF-8"> js.../myJS.js"> Insert title here //...即js代码与html代码分离。

4K2 1

WPF实现列表分页控件的示例代码分享

WPF 之列表分页控件框架使用大于等于.NET40。Visual Studio 2022。项目使用 MIT 开源许可协议。新建Pagination自定义控件继承自Control。...正常模式分页在外部套Grid分为0 - 5列：Grid.Column 0 总页数共多少300条。Grid.Column 1 输入每页显示多少10条。Grid.Column 2 上一页按钮。...精简模式分页在外部套Grid分为0 - 9列：Grid.Column 0 总页数共多少300条。Grid.Column 2 输入每页显示多少10条。Grid.Column 3 条 / 页。...实现代码1 /// 分页

1.3K0 0

html+js实现分页功能代码实例

1、分页功能实现效果如下： image.png 2、代码如下 js/jquery.min.js"> .title { padding:5px...-- 分页布局--> "; $(".ui-tab").append(infor_title) }) } //为测试分页功能代码.../table>"; $(".ui-tab").append(infor_title) }) } //初始化加载，分页首页数据

6.1K0 0

js分页

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

5.1K2 0

js无缝循环滚动图片示例代码

html代码 3 css代码 * { margin: 0; padding:...left; margin: 0; padding: 0; } #banner ul li img { width: 400px; height: 600px; } js...代码 //启动时方法 window.onload=function(){ var oDiv = document.getElementById('banner'); var oUl = oDiv.getElementsByTagName

12.2K2 0

js 分页插件_vue分页组件

JS或者JQuery来开发分页功能，毕竟插件很多源码比较复杂，也并不是所有功能都做到尽善尽美，仅仅是提供一个方便而已。...二、具体使用方法：（1）第一步，导入jquery和pagination.js js"> Jetbrains全家桶1年46，售后保障稳定...js"> （2）第二步，HTML代码：非常简单只需要一个div标签 ...（3）第三步, JS代码： $('.M-box').pagination({ pageCount:50, jump:true, coping:true, homePage...其实做分页最主要的就是通过AJAX来动态获取数据后进行分页显示，我们要明白的是，为什么分页？？

15.3K2 0

laravel实现分页样式替换示例代码(增加首、尾页)

前言本文主要给大家介绍了关于laravel分页样式替换的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。...方法如下：一、自定义一个类(代码如下)，位置随你放，注意命名空间。二、模板输出调用 {!!...最终样式实现代码 <?

6183 0

js -- 分页功能

html 代码 js"> js...分页 /** * 分页函数 * pno--页数 * psize--每页显示记录数 * 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数 * 纯js分页实质是数据行全部加载...，通过是否显示属性完成分页功能 **/ function goPage(pno,psize){ var itable = document.getElementById("idData");...num : endRow; 40 console.log(endRow); //遍历显示数据实现分页 for(var i=1;i<(num+1);i++){

4.6K2 0

AngularJS入门 & 分页 & CRUD示例

是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、依赖注入等等。...Controller : 操作数据，就是function，数据的crud 二.AngularJS 用法简介 1.引入文件 js...-- 引入AngularJS及其分页插件和分页样式 --> js"> js"> <link rel="stylesheet" href="..

3.3K4 0

PageHelper分页插件及通用分页js

分页概述 1.物理分页物理分页依赖的是某一物理实体，这个物理实体就是数据库，比如MySQL数据库提供了limit关键字，程序员只需要编写带有limit关键字的SQL语句，数据库返回的就是分页结果。...2.逻辑分页逻辑分页依赖的是程序员编写的代码。...数据库返回的不是分页结果，而是全部数据，然后再由程序员通过代码获取分页数据，常用的操作是一次性从数据库中查询出全部数据并存储到List集合中，因为List集合有序，再根据索引获取指定范围的数据。... js...：分页代码 function createPaginationNav(e, t, a, n, p, o, i, s) { null == e && (e = ""), e = e.replace

4.6K1 0

JS实现分页功能

分页在网页上是一个很常见的功能，今天我们来实现一个新闻列表，包含了分页的功能，效果如下：那么如何来实现这个功能呢？...--分页容器--> 上一页...document.querySelector('.new-main');//新闻容器 let pagination = document.querySelector('.pagination');//分页容器...div class="item-content"> ${item.content} `; }); }; //初始化页面 render(); 4，渲染分页结构...//渲染分页 for(let i = 1;i<=pageCount;i++){ pagination.innerHTML +=`${i}`; } pagination.innerHTML

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等； !...'; $('.page-footer').html(page); $('#pageSize').val(pagination.number); //分页需要

4.6K1 0

js之Vue mixins（混入）附代码示例详解

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将...

4952 0

分页-代码实现

1、分页数据流转流程图 PageBean.java import java.util.List; public class PageBean { private List beanList...-- 给出分页相关的链接 --> '>首页 <a href='<c:url value

1.3K1 0

原生JS实现分页效果

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

12.4K1 0

纯js全选全不选

源码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <m...

2.7K4 0

java分页代码_基本分页存储管理java代码

在java项目中不使用mybatis的pageHelper进行数据分页: 1....分页工具类编写： import java.util.List; public class PageModel { //结果集 private List list;...return name; } public void setName(String name) { this.name = name; } } 3.数据分页查询...= null; Connection connection = null; List list = new ArrayList(); try { //分页查询的数据...next()) { total = resultSet1.getInt(1); } resultSet1.close(); //将数据放到分页工具类中

1.4K4 0

vue纯前端分页_基于vue的表格组件

之前写了一篇，是简单分页，地址如下点击打开链接 https://blog.csdn.net/qq_33212500/article/details/80422148 vue 分页组件（比上一版本好看一些...），贴代码 vue-page.js 代码如下 var vuePage = { template:'\ <span class="form-inline...//pageSize:10, //分页数 //arrPageSize:[10,20,30,40], //当前页面 //pageNum:1, //总分页数 //pages:0, //记录总数 //total...，该代码复制到table标签下即可 js代码如下 var...vue = new Vue({ el:"#app", data:{ rsList:[], pagerData:{ page:{ //分页大小 pageSize:10, //分页数 arrPageSize

3265 0

springboot html vue.js 前后分离代码示例

> 没有相关数据 2.js...代码 var vm = new Vue({ el: '#app', data:{ varList: [], //list page: [], //分页类 pd: [] //map...}, 2000); }); } }, mounted(){ this.init(); } }) 3.后台代码

1.4K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭