1. Python技术站首页
  2. 其他
  3. JavaScript

分享一个自己写的简单的javascript分页组件

• JavaScript

下面我来详细讲解如何分享一个自己写的简单的 JavaScript 分页组件，并且提供两条示例说明。

前置知识

在开始分享 JavaScript 分页组件之前，需要掌握一些基本的前置知识，如 HTML、CSS 和 JavaScript 的基本语法和概念。同时，也需要了解一些相关的知识，比如 DOM 操作、事件监听、Ajax 等。

分享步骤

分享一个 JavaScript 分页组件，可以按照以下步骤进行：

  1. 编写 HTML 结构

在 HTML 中，需要定义一个包含分页组件的容器，如下所示：

<div id="pagination"></div>
  1. 编写 CSS 样式

在样式文件中，需要定义分页组件的外观样式，如分页按钮的颜色、大小、边框等，如下所示：

#pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-item {
  display: inline-block;
  margin: 0 10px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
}

.page-item.active {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}
  1. 编写 JavaScript 代码

JavaScript 代码是分页组件的核心部分，其功能是根据总记录数、每页显示的记录数、当前页码等参数生成分页按钮，并且在用户点击分页按钮时，能够触发相应的事件，加载对应页数的数据。下面是一个简单的分页组件示例：

class Pagination {
  constructor(options) {
    this.total = options.total;
    this.perPage = options.perPage || 10;
    this.currentPage = options.currentPage || 1;
    this.container = options.container;
    this.render();
  }

  render() {
    const totalPages = Math.ceil(this.total / this.perPage);
    const startPage = Math.max(1, this.currentPage - 2);
    const endPage = Math.min(totalPages, this.currentPage + 2);

    this.container.innerHTML = '';

    // 添加上一页按钮
    const prevBtn = document.createElement('span');
    prevBtn.classList.add('page-item');
    prevBtn.innerText = '<';
    prevBtn.addEventListener('click', () => {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.render();
      }
    });
    this.container.appendChild(prevBtn);

    // 根据总页数和当前页码，生成分页按钮
    for (let i = startPage; i <= endPage; i++) {
      const pageBtn = document.createElement('span');
      pageBtn.classList.add('page-item');
      pageBtn.innerText = i;
      if (i === this.currentPage) {
        pageBtn.classList.add('active');
      }
      pageBtn.addEventListener('click', () => {
        if (i !== this.currentPage) {
          this.currentPage = i;
          this.render();
        }
      });
      this.container.appendChild(pageBtn);
    }

    // 添加下一页按钮
    const nextBtn = document.createElement('span');
    nextBtn.classList.add('page-item');
    nextBtn.innerText = '>';
    nextBtn.addEventListener('click', () => {
      if (this.currentPage < totalPages) {
        this.currentPage++;
        this.render();
      }
    });
    this.container.appendChild(nextBtn);
  }
}

此代码中，我们定义了一个 Pagination 类，其中包含了总记录数、每页显示记录数、当前页码等参数，并且在构造函数中调用了 render() 方法，用于生成分页组件。在 render() 方法中，我们通过总记录数和每页显示记录数来计算出总页数，然后根据当前页码计算出需要显示的分页按钮的起始页码和终止页码。最后，我们根据起始页码和终止页码来生成分页按钮，并且为每个按钮绑定点击事件，用于切换当前页码，并重新生成分页组件。

  1. 使用分页组件

在 HTML 页面中，可以使用以下代码来实例化分页组件并显示：

const pagination = new Pagination({
  total: 100,
  perPage: 10,
  currentPage: 1,
  container: document.querySelector('#pagination'),
});

此代码中，我们传递了 total、perPage、currentPage、container 等参数给 Pagination 类，并且将包含分页组件的容器作为参数传递给 render() 方法。此外，还可以在 render() 方法中添加一些其他的逻辑，比如获取数据、渲染数据等。

示例说明

下面给出两个示例，帮助读者更好地理解如何使用和扩展 JavaScript 分页组件。

示例 1：分页组件与数据列表结合

在这个示例中，我们将分页组件与数据列表结合起来，用于展示用户的文章列表。首先，我们定义一个包含分页组件和数据列表的容器：

<div class="container">
  <div id="pagination"></div>
  <ul id="article-list"></ul>
</div>

然后，我们利用 Ajax 技术从服务器获取数据，并在数据加载完成后实例化分页组件，代码如下：

const perPage = 10;
const container = document.querySelector('#pagination');
const articleList = document.querySelector('#article-list');

function loadArticles(page) {
  // 发送 Ajax 请求，获取指定页码的文章列表
  ajax.get('/api/articles', {
    page,
    perPage,
  }).then((response) => {
    const articles = response.data;
    const total = response.total;
    articleList.innerHTML = '';

    // 根据文章列表渲染页面
    articles.forEach(article => {
      const item = document.createElement('li');
      item.innerText = article.title;
      articleList.appendChild(item);
    });

    // 在数据加载完成后，实例化分页组件
    const pagination = new Pagination({
      total,
      perPage,
      currentPage: page,
      container,
    });
  });
}

loadArticles(1);

此代码中，我们通过调用 Ajax 请求方式获取指定页码的文章列表，并在成功响应后将文章列表渲染到页面中。然后，我们实例化了分页组件，并将其添加到页面中。

示例 2：自定义样式和显示内容

在这个示例中，我们自定义了分页组件的样式和要显示的内容，并提供了更多的配置选项。首先，我们定义一个新的 Pagination 类，如下所示：

class CustomPagination {
  constructor(options) {
    this.total = options.total;
    this.perPage = options.perPage || 10;
    this.currentPage = options.currentPage || 1;
    this.prevText = options.prevText || '<';
    this.nextText = options.nextText || '>';
    this.container = options.container;
    this.render();
  }

  render() {
    const totalPages = Math.ceil(this.total / this.perPage);
    const startPage = Math.max(1, this.currentPage - 2);
    const endPage = Math.min(totalPages, this.currentPage + 2);

    this.container.innerHTML = '';

    // 添加上一页按钮
    const prevBtn = document.createElement('span');
    prevBtn.classList.add('page-item');
    prevBtn.innerText = this.prevText;
    prevBtn.addEventListener('click', () => {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.render();
      }
    });
    this.container.appendChild(prevBtn);

    // 根据总页数和当前页码，生成分页按钮
    for (let i = startPage; i <= endPage; i++) {
      const pageBtn = document.createElement('span');
      pageBtn.classList.add('page-item');
      pageBtn.innerText = i;
      if (i === this.currentPage) {
        pageBtn.classList.add('active');
      }
      pageBtn.addEventListener('click', () => {
        if (i !== this.currentPage) {
          this.currentPage = i;
          this.render();
        }
      });
      this.container.appendChild(pageBtn);
    }

    // 添加下一页按钮
    const nextBtn = document.createElement('span');
    nextBtn.classList.add('page-item');
    nextBtn.innerText = this.nextText;
    nextBtn.addEventListener('click', () => {
      if (this.currentPage < totalPages) {
        this.currentPage++;
        this.render();
      }
    });
    this.container.appendChild(nextBtn);

    // 添加显示信息
    const info = document.createElement('span');
    info.innerText = `共 ${this.total} 条记录， ${totalPages} 页`;
    this.container.appendChild(info);
  }
}

此代码中，我们添加了 prevText、nextText 等选项，用于自定义分页按钮的文本内容。同时，我们还添加了 info 显示选项，用于在分页组件下显示总记录数和总页数。

然后，我们定义了一个 CSS 样式文件，用于覆盖默认的分页组件样式，如下所示：

#pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

.page-item {
  display: inline-block;
  margin: 0 10px;
  padding: 5px 10px;
  border: none;
  border-radius: 3px;
  color: #007bff;
  cursor: pointer;
  background-color: #f5f5f5;
}

.page-item:hover {
  background-color: #eee;
}

.page-item.active {
  background-color: #007bff;
  color: #fff;
}

此代码中，我们改变了分页按钮的背景色、文本颜色等效果，并且去掉了分页按钮的边框。

最后，我们实例化 CustomPagination 类，并进行自定义的配置和样式设置，代码如下：

const pagination = new CustomPagination({
  total: 100,
  perPage: 10,
  currentPage: 1,
  container: document.querySelector('#pagination'),
  prevText: '上一页',
  nextText: '下一页',
});

通过以上步骤，我们可以自由地扩展和定制 JavaScript 分页组件，使其更符合我们的实际需求和设计要求。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：分享一个自己写的简单的javascript分页组件 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • 改变状态栏文字的js代码

    要通过JS代码来改变网页的状态栏文字，可以使用document.title属性。这个属性可以读取和设置当前网页的标题，同时一些浏览器也会将其作为状态栏文字显示。 下面是两个针对页面不同状态，使用JS代码改变状态栏文字的例子。 例子1：在鼠标hover链接时，将链接地址作为状态栏文字显示 在这个例子中，我们可以利用JS来改变链接的状态栏文字。当用户将鼠标指向链…

    JavaScript 2023年6月11日
    00

  • JS正则获取HTML元素的方法

    当我们在开发Web应用时，经常需要在DOM中根据正则表达式来查找和获取特定的HTML元素。如何使用JavaScript正则表达式来处理DOM的HTML元素呢？下面是一些方法： 使用JavaScript内置函数来获取HTML元素 JavaScript通过document对象来表示整个HTML文档。document对象上使用的内置函数可以轻松地获取DOM元素。通…

    JavaScript 2023年6月10日
    00

  • JavaScript 面向对象之命名空间

    JavaScript 面向对象之命名空间 JavaScript 是一门支持面向对象编程的语言，但在实践中，我们发现 JavaScript 的命名空间机制并不完整或者说不够严谨。因此，我们可以借助 Object 对象和函数声明的方式来实现 JavaScript 的命名空间。 命名空间的概念 命名空间是一个用于“组织代码”的容器，它类似于文件系统中文件夹的概念，…

    JavaScript 2023年5月27日
    00

  • JavaScript判断表单中多选框checkbox选中个数的方法

    当我们需要检查表单中多选框checkbox的选中个数时，我们可以使用JavaScript编写代码来完成此任务。以下是一些检查多选框选中个数的方法： 方法一：使用原生JavaScript 获取多选框节点列表 我们需要先通过document.getElementsByName()方法获取包含多选框元素的节点列表。以下代码展示了如何获取名称为“items”的多选框…

    JavaScript 2023年6月10日
    00

  • 教你用几十行js实现很炫的canvas交互特效

    关于“教你用几十行js实现很炫的canvas交互特效”的完整攻略，我将从以下几个方面进行详细讲解： 准备工作 在实现交互特效之前，我们需要准备一些必要的工作：首先是引入Canvas标签；其次是编写Canvas绘制所需的HTML、CSS及JavaScript代码；最后还需要确定绘制的内容和样式。 创建画布并绘制基础图形 在Canvas中创建画布并绘制基础图形是…

    JavaScript 2023年6月10日
    00

  • JavaScript高级程序设计 阅读笔记（十九） js表格排序

    下面是针对”JavaScript高级程序设计 阅读笔记（十九） js表格排序”的完整攻略： 阅读笔记简介 这篇阅读笔记主要讲解了如何使用JavaScript进行表格排序。通过这篇笔记，我们可以学习到如何使用JavaScript实现表格排序的几种方式，包括基于DOM操作、使用jQuery库、第三方SortableJS库和自定义tableSorter库等。 方法…

    JavaScript 2023年5月27日
    00

  • js设置和获取自定义属性的方法

    关于JS设置和获取自定义属性的方法，我们可以分为以下两种： 1. 使用.dataset属性 通过设置dataset属性，我们可以在HTML元素中定义自定义属性，这些属性可以是任何名称，并且可以作为一个无结构数据来处理，类似于JSON格式的键值对。 1.1 设置自定义属性 通过设置dataset属性，我们可以轻松地在JS中定义HTML元素的自定义属性，方法如下…

    JavaScript 2023年6月10日
    00

  • JavaScript大文件上传的处理方法之切片上传

    JavaScript大文件上传通常会遇到许多问题，如上传速度慢、取消上传无法恢复等。为了解决这些问题，常用的方法是将文件切片后再上传，即切片上传。下面是切片上传的完整攻略。 什么是切片上传？ 切片上传，即将大文件分割成多个小文件进行上传。在上传的同时，可以对每个小文件进行 MD5 校验以保证文件的一致性。在上传完所有切片后，服务端再将多个小文件合并成一个完整…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部