js简单的分页器插件代码实例

下面是关于“js简单的分页器插件代码实例”的完整攻略：

1. 什么是分页器

分页器是一种常见的网页分页功能，在信息展示较多的网页中特别常见，例如商品列表、新闻列表、书籍列表等。通俗的讲，分页器就是把一系列信息按一定的规则分成若干页，然后在页面上生成一个标准的页码导航，方便用户快速地切换页面。

2. 如何实现一个简单的分页器

下面介绍一种简单的前端JS分页器实现方法，用于将数据分页展示并生成一组带有页码的链接。我们假设要分页展示的数据存储在一个数组中，代码如下：

    let dataArr = [
        {id: 1, name: 'apple'},
        {id: 2, name: 'banana'},
        {id: 3, name: 'orange'},
        {id: 4, name: 'peach'},
        {id: 5, name: 'grape'},
        {id: 6, name: 'watermelon'},
        {id: 7, name: 'strawberry'},
        {id: 8, name: 'pineapple'},
        {id: 9, name: 'kiwi'},
        {id: 10, name: 'mango'},
        {id: 11, name: 'pear'},
        {id: 12, name: 'lemon'},
        {id: 13, name: 'cherry'},
        {id: 14, name: 'blueberry'},
        {id: 15, name: 'raspberry'},
        {id: 16, name: 'pomegranate'},
        {id: 17, name: 'apricot'},
        {id: 18, name: 'coconut'},
        {id: 19, name: 'durian'},
        {id: 20, name: 'dragon fruit'}
    ];

其中包含二十条数据，接下来我们将其在页面上分页展示。为了让展示更加美观，我们将使用Bootstrap来美化页面。同时为提高代码可读性，我们会将分页器封装成一个插件。

(1) 前端代码

在html中插入以下代码：

    <div id="pagination-container"></div>
    <div class="row mt-4" id="data-container"></div>

其中，id="pagination-container"的div标签用于放置生成的页码导航，id="data-container"的div标签用于放置分页展示的数据。

(2) JS分页器代码

请注意：以下代码块是一个完整的JavaScript文件，其中包含一个自调用函数，是一种封装插件的方式。在实际开发中，可以将其放在单独的js文件中，并在页面中通过