原生js+ajax分页组件

下面我详细讲解一下如何实现“原生js+ajax分页组件”。

前置知识

在实现分页组件之前，需要对以下几个知识点有一定的了解。

原生JS的DOM操作
Ajax异步请求及响应
分页算法

分页算法

分页算法是分页组件实现的核心。下面介绍两种常见的分页算法。

基本分页算法

基本分页算法的实现非常简单，直接根据当前页码和每页显示数量计算出起始记录的位置和结束位置，再将数据进行截取即可。其计算公式如下：

$start = ($page - 1) * $pagesize;
$end = $start + $pagesize - 1;

其中，$page表示当前页码，$pagesize表示每页显示数量。

带省略号的分页算法

当分页数过多时，会出现页码过多、页面宽度不够的问题。此时，可以采用省略号来展示更多的页码。具体实现方式为：当页码数量超过预设值时，将部分页码用省略号代替，让用户点击省略号展开更多的页码。下面是页面展示效果：

1 2 3 ... 9 10 11 ... 19 20

实现这种分页算法需要在分页组件中添加展开省略号、合并省略号的功能。

分页组件实现步骤

接下来，我们开始实现“原生js+ajax分页组件”。

定义HTML结构

分页组件的基本HTML结构如下：

<ul class="pagination"></ul>

定义CSS样式

我们可以使用Bootstrap样式库中的分页样式，也可以自己编写样式。下面是一个基本的分页样式：

.pagination {
    list-style: none;
    display: inline-block;
    padding-left: 0;
    border-radius: 4px;
}

.pagination li {
    display: inline;
}

.pagination li a {
    color: #666;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 6px 12px;
}

.pagination li:first-child a {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.pagination li:last-child a {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.pagination li a:hover,
.pagination li.active a {
    color: #fff;
    background-color: #337ab7;
    border-color: #337ab7;
}

实现分页逻辑

在实现分页逻辑之前，我们需要定义以下几个变量：

var currentPage = 1; // 当前页码
var totalPage = 1; // 总页码数
var pageSize = 10; // 每页显示数量
var maxShowPage = 5; // 最多展示的页码数，超过这个数会出现省略号
var ajaxUrl = '/data.json'; // 数据请求地址

接着，在页面加载完成时，我们需要向后台请求数据并进行页面渲染。这可以通过以下步骤来完成：

发送Ajax异步请求，获取后台返回的数据；
计算页码数量、总记录数等分页数据；
根据分页数据生成相应的分页HTML代码，并将其插入到页面中。

下面是实现分页逻辑的示例代码：

function loadData(url, callback) {
    // 发送Ajax请求，获取后台返回的数据
    // 代码省略...
}

function renderPagination(currentPage, totalPage) {
    var paginationHtml = '';
    var startPage, endPage;

    // 计算展示的页码范围
    if (totalPage <= maxShowPage) {
        startPage = 1;
        endPage = totalPage;
    } else {
        // 计算左侧页码范围
        startPage = currentPage - Math.floor(maxShowPage / 2);
        endPage = startPage + maxShowPage - 1;

        // 如果左侧范围不足，则修改右侧范围
        if (startPage < 1) {
            endPage = currentPage + (maxShowPage - 1);
            startPage = endPage - maxShowPage + 1;
        }

        // 如果右侧范围超出总页码数，则修改左侧范围
        if (endPage > totalPage) {
            endPage = totalPage;
            startPage = endPage - maxShowPage + 1;
        }
    }

    // 生成HTML代码
    paginationHtml += '<li><a href="#" data-page="' + 1 + '">首页</a></li>';
    paginationHtml += '<li><a href="#" data-page="' + (currentPage - 1) + '">上一页</a></li>';
    for (var i = startPage; i <= endPage; i++) {
        var activeClass = i === currentPage ? 'active' : '';
        paginationHtml += '<li class="' + activeClass + '"><a href="#" data-page="' + i + '">' + i + '</a></li>';
    }
    paginationHtml += '<li><a href="#" data-page="' + (currentPage + 1) + '">下一页</a></li>';
    paginationHtml += '<li><a href="#" data-page="' + totalPage + '">末页</a></li>';

    return paginationHtml;
}

function initPagination(currentPage, totalPage) {
    var paginationHtml = renderPagination(currentPage, totalPage);
    var paginationWrapper = document.querySelector('.pagination');

    // 清空原有的分页按钮
    paginationWrapper.innerHTML = '';

    // 将分页按钮插入到页面中
    var tempDiv = document.createElement('div');
    tempDiv.innerHTML = paginationHtml;
    paginationWrapper.appendChild(tempDiv.querySelector('ul'));

    // 为分页按钮绑定点击事件
    paginationWrapper.addEventListener('click', function(e) {
        var pageInput = e.target.dataset.page;
        if (pageInput) {
            e.preventDefault();
            if (pageInput === '...') return; // 省略号按钮不可点击

            var page = parseInt(pageInput);
            if (page > 0 && page <= totalPage && page !== currentPage) {
                currentPage = page;
                loadData(ajaxUrl, function(data) {
                    // 根据新页码重新渲染分页按钮
                    totalPage = Math.ceil(data.length / pageSize);
                    paginationHtml = renderPagination(currentPage, totalPage);

                    // 将分页按钮插入到页面中
                    tempDiv.innerHTML = paginationHtml;
                    paginationWrapper.innerHTML = '';
                    paginationWrapper.appendChild(tempDiv.querySelector('ul'));

                    // 更新数据内容
                    var start = (currentPage - 1) * pageSize;
                    var end = start + pageSize;
                    var dataHtml = '';
                    for (var i = start; i < end && i < data.length; i++) {
                        dataHtml += '<li>' + data[i] + '</li>';
                    }
                    document.querySelector('.data').innerHTML = '<ul>' + dataHtml + '</ul>';
                });
            }
        }
    });
}

loadData(ajaxUrl, function(data) {
    totalPage = Math.ceil(data.length / pageSize); // 计算总页码数
    initPagination(currentPage, totalPage); // 初始化分页组件

    // 渲染初始数据内容
    var start = (currentPage - 1) * pageSize;
    var end = start + pageSize;
    var dataHtml = '';
    for (var i = start; i < end && i < data.length; i++) {
        dataHtml += '<li>' + data[i] + '</li>';
    }
    document.querySelector('.data').innerHTML = '<ul>' + dataHtml + '</ul>';
});

示例说明

下面给出两个分页组件示例，供参考。

示例一

以下是一个简单的分页组件示例，代码如下：

<div class="data"></div>
<ul class="pagination"></ul>

<script>
var currentPage = 1;
var totalPage = 1;
var pageSize = 10;
var maxShowPage = 5;
var ajaxUrl = '/data.json';

function loadData(url, callback) {
    // 发送Ajax请求，获取后台返回的数据
    // 代码省略...
}

function renderPagination(currentPage, totalPage) {
    // 代码省略...
}

function initPagination(currentPage, totalPage) {
    // 代码省略...
}

loadData(ajaxUrl, function(data) {
    totalPage = Math.ceil(data.length / pageSize); // 计算总页码数
    initPagination(currentPage, totalPage); // 初始化分页组件

    // 渲染初始数据内容
    var start = (currentPage - 1) * pageSize;
    var end = start + pageSize;
    var dataHtml = '';
    for (var i = start; i < end && i < data.length; i++) {
        dataHtml += '<li>' + data[i] + '</li>';
    }
    document.querySelector('.data').innerHTML = '<ul>' + dataHtml + '</ul>';
});
</script>

在实现分页组件之前，我们需要定义几个变量。currentPage表示当前显示的页码，totalPage表示总页码数，pageSize表示每页显示数量，maxShowPage表示最多展示的页码数，ajaxUrl表示数据请求地址。我们首先通过Ajax请求数据，并计算出总页码数，然后初始化分页组件，并渲染出初始数据内容。当用户点击分页按钮时，我们根据新的页码重新渲染分页组件，然后再重新加载数据并渲染内容。

示例二

以下是一个带省略号的分页组件示例，代码如下：

<div class="data"></div>
<ul class="pagination"></ul>

<script>
var currentPage = 1;
var totalPage = 1;
var pageSize = 10;
var maxShowPage = 5;
var ajaxUrl = '/data.json';

function loadData(url, callback) {
    // 发送Ajax请求，获取后台返回的数据
    // 代码省略...
}

function renderPagination(currentPage, totalPage) {
    // 代码省略...
}

function initPagination(currentPage, totalPage) {
    // 代码省略...
}

loadData(ajaxUrl, function(data) {
    totalPage = Math.ceil(data.length / pageSize); // 计算总页码数
    initPagination(currentPage, totalPage); // 初始化分页组件

    // 渲染初始数据内容
    var start = (currentPage - 1) * pageSize;
    var end = start + pageSize;
    var dataHtml = '';
    for (var i = start; i < end && i < data.length; i++) {
        dataHtml += '<li>' + data[i] + '</li>';
    }
    document.querySelector('.data').innerHTML = '<ul>' + dataHtml + '</ul>';
});
</script>

这个分页组件与前一个例子的基本实现相同，只是增加了省略号的功能。当页码数量超过预设值时，我们会用省略号代替部分页码。用户当点击省略号按钮时，我们会展开更多的页码。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生js+ajax分页组件 - Python技术站