JS分页工具实例

本文将为大家讲解如何使用JavaScript编写分页工具的实例。本文涵盖了完整的实现过程、示例说明和代码实现。通过本文的介绍，您将学会如何使用JavaScript和jQuery创建简单的分页工具。

实现原理

分页工具的实现原理很简单，即通过计算数据总量和每页数据数量，生成页码列表。当用户点击某一页时，更新数据展示区域内容，并更新页码列表的当前选中页码。在本文中，主要使用JavaScript和jQuery实现该功能。

示例说明

示例1

假设您的网站上有一个商品列表页面，每页显示10件商品，您需要编写一个分页工具来实现商品的分页展示效果。以下是实现步骤。

1. HTML结构：

<div id="product_list"></div>
<div id="pagination"></div>

1. CSS样式：

#product_list {
  /* 此处为商品列表样式 */
}
#pagination {
  /* 此处为分页工具样式 */
}

1. JavaScript代码：

var currentPage = 1; // 当前页码
var pageCount = 10; // 总页数
var totalPages = 100; // 总页数
var pageSize = 10; // 每页显示数量
var productList = []; // 商品数据

// 初始化数据
for(var i = 0; i<totalPages * pageSize; i++){
    productList[i] = "商品" + i;
}

// 更新分页工具
function updatePagination(){
    var pagination = $("#pagination");
    pagination.empty();
    var pageList = '<a href="#" class="prevPage">上一页</a>';
    for(var i = 1; i<=pageCount; i++){
        if(i == currentPage){
            pageList += '<a href="#" class="currentPage">' + i + '</a>';
        }else{
            pageList += '<a href="#">' + i + '</a>';
        }
    }
    pageList += '<a href="#" class="nextPage">下一页</a>';
    pagination.html(pageList);
}

// 更新商品列表
function updateProductList(){
    var start = (currentPage - 1) * pageSize;
    var end = currentPage * pageSize;
    var productHtml = '';
    for(var i = start; i < end && i < productList.length; i++){
        productHtml += '<div>' + productList[i] + '</div>';
    }
    $("#product_list").html(productHtml);
}

$(document).ready(function(){
    // 初始化分页工具
    pageCount = Math.ceil(productList.length / pageSize);
    updatePagination();
    updateProductList();

    // 绑定页码点击事件
    $("#pagination").on("click", "a", function(){
        if($(this).hasClass("prevPage")){
            currentPage--;
        }else if($(this).hasClass("nextPage")){
            currentPage++;
        }else{
            currentPage = parseInt($(this).text());
        }
        if(currentPage < 1){
            currentPage = 1;
        }else if(currentPage > pageCount){
            currentPage = pageCount;
        }
        updatePagination();
        updateProductList();
    });
});

示例2

假设您需要对文章列表进行分页，每页显示5篇文章，并且需要添加快捷跳转到第一页和最后一页的功能，以下是实现步骤。

1. HTML结构：

<div id="article_list"></div>
<div id="pagination"></div>

1. CSS样式：

#article_list {
  /* 此处为文章列表样式 */
}
#pagination {
  /* 此处为分页工具样式 */
}

1. JavaScript代码：

var currentPage = 1; // 当前页码
var pageCount = 10; // 总页数
var totalPages = 100; // 总页数
var pageSize = 5; // 每页显示数量
var articleList = []; // 文章数据

// 初始化数据
for(var i = 0; i<totalPages * pageSize; i++){
    articleList[i] = "文章" + i;
}

// 更新分页工具
function updatePagination(){
    var pagination = $("#pagination");
    pagination.empty();
    var pageList = '';

    // 添加快捷跳转
    pageList += '<a href="#" class="firstPage">&lt;&lt;首页</a>';
    pageList += '<a href="#" class="prevPage">&lt;上一页</a>';

    // 添加当前页与页码
    for(var i = 1; i<=pageCount; i++){
        if(i == currentPage){
            pageList += '<a href="#" class="currentPage">' + i + '</a>';
        }else{
            pageList += '<a href="#">' + i + '</a>';
        }
    }

    // 添加快捷跳转
    pageList += '<a href="#" class="nextPage">下一页&gt;</a>';
    pageList += '<a href="#" class="lastPage">末页&gt;&gt;</a>';

    pagination.html(pageList);
}

// 更新文章列表
function updateArticleList(){
    var start = (currentPage - 1) * pageSize;
    var end = currentPage * pageSize;
    var articleHtml = '';
    for(var i = start; i < end && i < articleList.length; i++){
        articleHtml += '<div>' + articleList[i] + '</div>';
    }
    $("#article_list").html(articleHtml);
}

$(document).ready(function(){
    // 初始化分页工具
    pageCount = Math.ceil(articleList.length / pageSize);
    updatePagination();
    updateArticleList();

    // 绑定页码点击事件
    $("#pagination").on("click", "a", function(){
        if($(this).hasClass("firstPage")){
            currentPage = 1;
        }
        else if($(this).hasClass("prevPage")){
            currentPage--;
        }
        else if($(this).hasClass("nextPage")){
            currentPage++;
        }
        else if($(this).hasClass("lastPage")){
            currentPage = pageCount;
        }
        else{
            currentPage = parseInt($(this).text());
        }
        if(currentPage < 1){
            currentPage = 1;
        }else if(currentPage > pageCount){
            currentPage = pageCount;
        }
        updatePagination();
        updateArticleList();
    });
});

总结

本文为您讲解了如何使用JavaScript和jQuery创建简单的分页工具，通过上述示例的介绍，相信大家已经掌握了如何实现基本的分页功能。在实际开发中，您可以根据具体需求进行相应的改动和扩展，以满足更具体的分页需求。