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

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

• JavaScript
yizhihongxing

下面我来详细讲解如何分享一个自己写的简单的 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中箭头函数与this的写法和理解

    JS中箭头函数与this的写法和理解是一个非常重要的问题，因为箭头函数的this规则和普通函数有所不同，如果不理解它的具体规则，就容易出现一些令人困惑的问题。下面就是一份关于箭头函数和this的完整攻略。 箭头函数的基本语法 箭头函数是在ES6中引入的一种语法，它是一种特殊的函数，它有以下的形式： (parameter1, parameter2, …, …

    JavaScript 2023年6月10日
    00

  • JavaScript 基础问答一

    JavaScript 基础问答一 中包含了一些关于JavaScript基础知识的问题，下面我将从以下几个方面对其进行详细讲解。 基本数据类型和引用数据类型 JavaScript中的数据类型可以分为基本数据类型和引用数据类型。基本数据类型包括：String、Number、Boolean、null、undefined，引用数据类型包括：Object、Array、…

    JavaScript 2023年5月19日
    00

  • JavaScript 中有了Object 为什么还需要 Map 呢

    JavaScript 中的 Object 是一种键值对集合的数据结构，可以被用来存储和访问任意类型的数据。而 Map 是一种新的对象类型，它不同于普通的 Object，可以被用来存储键值对，其中键和值都可以是任意类型的数据。 虽然 Object 是 JavaScript 中最常用的数据结构之一，但是 Map 在某些情况下更为实用。下面列举了两个使用 Map …

    JavaScript 2023年6月10日
    00

  • jQuery表单验证之密码确认

    本文将为您提供简明易懂的jQuery表单验证之密码确认攻略。我们将提供完整的步骤和示例说明，帮助您解决表单验证过程中的疑难问题。 步骤一：引入jQuery库和验证插件 首先，您需要引入jQuery库和验证插件，以便您可以轻松地在网站上进行表单验证。您可以在以下位置找到jQuery库和验证插件： <script src="https://cod…

    JavaScript 2023年6月10日
    00

  • 微信小程序 教程之事件

    以下是关于“微信小程序教程之事件”的详细攻略： 什么是小程序事件 微信小程序中，我们可以使用事件来监听用户的操作，并根据用户操作来触发我们程序中的相应的行为。小程序中常见的一些事件如下： touchstart、touchmove、touchend：触摸事件，可以监听用户触摸屏幕的动作； tap、longpress、longtap：点击事件，可以监听用户单击、…

    JavaScript 2023年6月11日
    00

  • 使用JS location实现搜索框历史记录功能

    有一种常见的搜索框历史记录功能是，当用户在搜索框中输入关键字后，网站会记录这个关键字，并在搜索框下方显示搜索历史记录，用户可以快速选择历史记录中的关键字再次进行搜索。 实现这个功能可以使用JS中的location对象。以下是实现搜索框历史记录功能的详细步骤： 1. 监听搜索框的输入事件 首先，需要在搜索框上添加事件监听器，监听搜索框的输入事件。当用户在搜索框…

    JavaScript 2023年6月11日
    00

  • JavaScript 映射器 array.flatMap()

    JavaScript的映射器array.flatMap()方法可以将一个数组的每个元素映射到另一个数组中，然后将所有的映射结果压缩成一个新数组。这个方法适用于一些场景，例如需要从一个二维数组中提取子数组元素，或者想要将多个数组合并成一个新的数组。下面是详细的攻略： 1. 语法 array.flatMap(callback(currentValue[, ind…

    JavaScript 2023年5月27日
    00

  • JavaScript中Date对象的常用方法示例

    JavaScript中Date对象是用来表示日期和时间的对象，它对日期和时间的处理非常方便。下面是几个常用的Date对象的方法： 获取当前日期和时间 方法名称：getDate() 该方法返回日期（1-31）。 let today = new Date();   let day = today.getDate(); console.log("今天是&…

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