原生javascript实现的分页插件pagenav

下面我就为您详细讲解如何使用原生Javascript实现一个分页插件pagenav。

一、准备工作

在开始之前，我们需要准备以下工作：

在HTML文件中引入pagenav.css和pagenav.js文件。
准备一个HTML占位容器用于显示分页内容。
准备一个和后台返回数据对应的分页数据对象，其中包含当前页码、每页显示条数、数据总条数等信息。

二、编写分页html代码

pagenav插件需要手动添加分页HTML代码，我们可以使用以下代码添加一个简单的分页html结构：

<div id="pagenav"></div>

三、编写JS代码

在Javascript文件中，我们需要先定义一个getPageData()函数用于获取当前页的数据，并以对象的形式返回。下面是一个简单的示例：

function getPageData(pageNum, pageSize) {
    // 构造模拟数据
    var result = {
        total: 100,
        data: []
    };
    for(var i = (pageNum - 1) * pageSize + 1; i <= pageNum * pageSize; i++) {
        result.data.push({index: i, value: 'data' + i});
    }
    return result;
}

接下来，我们需要调用getPageData()函数，获取当前页的数据，并将数据渲染到HTML模板中，这里我们使用innerHTML属性来设置pagination元素的内容。

// 分页容器
var pagenav = document.getElementById('pagenav');

// 当前页码
var currentPage = 1;

// 每页显示条数
var pageSize = 10;

// 获取分页数据
var data = getPageData(currentPage, pageSize);

// 渲染分页数据到HTML模板中
var html = '';
for(var i = 0; i < data.data.length; i++) {
    html += '<div>' + data.data[i].index + ' ' + data.data[i].value + '</div>';
}
pagenav.innerHTML = html;

最后，我们需要实现分页导航功能，将导航HTML代码添加到pagination元素中。我们可以使用pagenav.js提供的PaginationNav类来实现分页导航功能。

// 分页容器
var pagenav = document.getElementById('pagenav');

// 当前页码
var currentPage = 1;

// 每页显示条数
var pageSize = 10;

// 获取分页数据
var data = getPageData(currentPage, pageSize);

// 渲染分页数据到HTML模板中
var html = '';
for(var i = 0; i < data.data.length; i++) {
    html += '<div>' + data.data[i].index + ' ' + data.data[i].value + '</div>';
}
pagenav.innerHTML = html;

// 分页导航
var pagination = new PaginationNav(pagenav, {
    total: data.total,
    currentPage: currentPage,
    pageSize: pageSize,
    callback: function(newPage) {
        // 更新当前页码
        currentPage = newPage;

        // 重新获取分页数据
        var newData = getPageData(currentPage, pageSize);

        // 渲染分页数据到HTML模板中
        var newHtml = '';
        for(var i = 0; i < newData.data.length; i++) {
            newHtml += '<div>' + newData.data[i].index + ' ' + newData.data[i].value + '</div>';
        }
        pagenav.innerHTML = newHtml;
    }
});

四、示例说明

下面我们来看一下如何使用pagenav插件，这里我们使用两个示例进行说明：

1、使用Ajax获取分页数据

在我们的示例中，我们通过以下方式使用Ajax请求获取分页数据：

function getPageData(pageNum, pageSize, callback) {
    // 请求数据
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://example.com?page=' + pageNum + '&pageSize=' + pageSize);
    xhr.onload = function() {
        if(xhr.status === 200) {
            // 将json数据解析为对象
            var data = JSON.parse(xhr.responseText);

            // 调用回调函数
            callback(data);
        }
    };
    xhr.send();
}

// 分页容器
var pagenav = document.getElementById('pagenav');

// 当前页码
var currentPage = 1;

// 每页显示条数
var pageSize = 10;

// 获取分页数据
getPageData(currentPage, pageSize, function(data) {
    // 渲染分页数据到HTML模板中
    var html = '';
    for(var i = 0; i < data.data.length; i++) {
        html += '<div>' + data.data[i].index + ' ' + data.data[i].value + '</div>';
    }
    pagenav.innerHTML = html;

    // 分页导航
    var pagination = new PaginationNav(pagenav, {
        total: data.total,
        currentPage: currentPage,
        pageSize: pageSize,
        callback: function(newPage) {
            // 更新当前页码
            currentPage = newPage;

            // 重新获取分页数据
            getPageData(currentPage, pageSize, function(newData) {
                // 渲染分页数据到HTML模板中
                var newHtml = '';
                for(var i = 0; i < newData.data.length; i++) {
                    newHtml += '<div>' + newData.data[i].index + ' ' + newData.data[i].value + '</div>';
                }
                pagenav.innerHTML = newHtml;
            });
        }
    });
});

2、使用Bootstrap样式美化分页导航

我们可以通过手动修改pagenav.css文件，来改变分页导航的样式。这里我们可以使用Bootstrap样式美化我们的分页导航。

/* 整体分页导航容器 */
.pagination {
  margin: 20px 0;
  text-align: center;
}

/* 分页链接样式 */
.pagination a {
  padding: 10px;
  margin-right: 10px;
  border: 1px solid #DDD;
  border-radius: 4px;
}

/* 禁用和当前链接样式 */
.pagination .disabled a,
.pagination .active a {
  background-color: #337AB7;
  color: #FFF;
  border-color: #337AB7;
}

然后按照如下代码初始化我们的分页导航：

// 分页容器
var pagenav = document.getElementById('pagenav');

// 当前页码
var currentPage = 1;

// 每页显示条数
var pageSize = 10;

// 获取分页数据
var data = getPageData(currentPage, pageSize);

// 渲染分页数据到HTML模板中
var html = '';
for(var i = 0; i < data.data.length; i++) {
    html += '<div>' + data.data[i].index + ' ' + data.data[i].value + '</div>';
}
pagenav.innerHTML = html;

// 分页导航
var pagination = new PaginationNav(pagenav, {
    total: data.total,
    currentPage: currentPage,
    pageSize: pageSize,
    callback: function(newPage) {
        // 更新当前页码
        currentPage = newPage;

        // 重新获取分页数据
        var newData = getPageData(currentPage, pageSize);

        // 渲染分页数据到HTML模板中
        var newHtml = '';
        for(var i = 0; i < newData.data.length; i++) {
            newHtml += '<div>' + newData.data[i].index + ' ' + newData.data[i].value + '</div>';
        }
        pagenav.innerHTML = newHtml;
    }
});

pagination.setOptions({
  // 修改Bootstrap样式
  ulClass: 'pagination',
  liClass: '',
  aClass: ''
});

以上就是使用原生Javascript实现的分页插件pagenav的详细攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生javascript实现的分页插件pagenav - Python技术站