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日

相关文章

  • java构造http请求的几种方式(附源码)

    我来为您详细讲解”Java构造HTTP请求的几种方式”。 1. 使用URLConnection发送HTTP请求 使用URLConnection可以方便的发送HTTP请求。下面是一个使用URLConnection发送get请求的示例代码： public static String sendGetRequest(String url) throws Except…

    JavaScript 2023年6月11日
    00

  • JavaScript内置对象之Array的使用小结

    JavaScript内置对象之Array的使用小结： 1. 概述 JavaScript内置对象之Array是一种可以保存多个值的可变长度的列表，可以通过下标获取或修改其中的某个元素。 2. 声明数组 可以使用字面量的方式声明一个空数组和非空数组，如下所示： var arrEmpty = []; // 空数组 var arr1 = [1, 2, 3]; // …

    JavaScript 2023年5月27日
    00

  • JavaScript中require和import的区别详解

    JavaScript中require和import的区别详解 在JavaScript中，有两种方法用于引入外部模块：require和import。这两种方法虽然都能实现模块的引入，但是在用法和功能上存在一些区别，接下来我们将分别讲解它们并提供示例。 require require是CommonJS中使用的一种加载机制，使用较为简单，用于引入基于node.js…

    JavaScript 2023年6月10日
    00

  • JS 加入收藏夹的代码(主流浏览器通用)

    这里提到的“JS 加入收藏夹的代码(主流浏览器通用)”是指使用JavaScript代码实现将当前网页添加到收藏夹中的功能，下面是详细讲解完整攻略： 步骤一：创建添加收藏夹的代码段 我们可以使用Javascript创建一个函数，将当前网页添加到收藏夹，并返回true或false来表示是否添加成功。下面是一个示例代码： function addFavorite(…

    JavaScript 2023年5月27日
    00

  • JavaScript 数组some()和filter()的用法及区别

    本篇攻略将详细讲解 JavaScript 数组 some() 和 filter() 方法的用法及区别。在讲解之前，需要明确的是，这两个方法均适用于 JavaScript 数组对象，且均为对数组进行遍历和筛选的方法，但使用方式和作用有所不同。 一、JavaScript 数组 some() 方法 1.1 作用 JavaScript 数组 some() 方法用于检…

    JavaScript 2023年5月27日
    00

  • JavaScript全局函数使用简单说明

    下面是关于“JavaScript全局函数使用简单说明”的完整攻略。 什么是JavaScript全局函数 JavaScript全局函数指的是无需创建对象即可调用的函数。在JavaScript中，有一些函数不需要为其创建对象即可使用，这些函数就被称为 JavaScript全局函数。这些函数可以让我们更方便地使用许多常用操作。 JavaScript全局函数的简单说…

    JavaScript 2023年5月27日
    00

  • Jsonp 跨域的原理以及Jquery的解决方案

    一、Jsonp 跨域的原理 当我们开发 Web 应用时，存在需要通过 JavaScript 从不同域名的服务器调用数据的情景，这就会导致跨域问题。常规的 Ajax 请求需要与后端协商服务器支持跨域请求才能实现，但在不支持跨域访问的情况下，我们可以使用 Jsonp 技术来解决。 Jsonp 基于 “” 标签的加载机制，在请求发起前，在文档中动态添加一个指向目标…

    JavaScript 2023年5月27日
    00

  • js判断一个字符串是以某个字符串开头的简单实例

    下面是”js判断一个字符串是以某个字符串开头的简单实例”的完整攻略： 一、使用字符串的startsWith()函数进行判断 startsWith()函数是ES6引入的函数，用来判断一个字符串是否以另一个字符串开头。下面是一个简单的实例： var str = ‘Hello World!’; console.log(str.startsWith(‘Hello’)…

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