沃梦达 / 编程技术 / 前端开发 / 正文

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

前端开发
2023-12-01

下面我来详细讲解如何分享一个自己写的简单的 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分页组件

上一篇： JS获取当前网页大小以及屏幕分辨率等
下一篇： Javascript前端UI框架Kit使用指南之Kitjs简介

基础教程推荐

学习HTML
学习jQuery
学习Laravel
学习CSS3
学习Vue.js
学习Bootstrap5
学习ThinkPHP
学习AJAX
猜你喜欢
最新文章
热门文章
编程基础
热门标签
网站首页 HTML/CSS 菜单 Layui Yii2