JS实现前端动态分页码

最新推荐文章于 2023-03-29 14:48:54 发布

转载最新推荐文章于 2023-03-29 14:48:54 发布 · 194 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/llllpzyy/p/11003745.html

文章标签：

#前端 #ViewUI

本文详细介绍了如何设计和实现一个动态分页功能的前端组件，包括页面布局、样式设置及JavaScript交互逻辑。通过实例展示了如何根据当前页码和总页数调整分页按钮的显示，以及点击分页按钮时如何更新页面数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自; https://www.jianshu.com/p/7ee09b150bdd

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

body .zl_rank .flex_box #pagination {
      width: 80vw;
      height: 16vw;
      display: flex;
      align-items: flex-end;
      justify-content: center; }
      body .zl_rank .flex_box #pagination div {
        padding: 5px;
        float: left;
        list-style-type: none;
        font-size: 20px;
        color: #8080FF; }
      body .zl_rank .flex_box #pagination span {
        float: left;
        font-size: 26px;
        vertical-align: middle;
        color: #8080FF; }
      body .zl_rank .flex_box #pagination #active {
        color: black; }

var pageOptions = {
    pageTotal: 1, //总页码
    curPage: 1, //当前页码
    paginationId: ''
};
dynamicPagingFunc(pageOptions);

function dynamicPagingFunc(pageOptions) {
    var pageTotal = pageOptions.pageTotal || 1;
    var curPage = pageOptions.curPage || 1;
    var doc = document;
    var paginationId = doc.getElementById('' + pageOptions.paginationId + '') || doc.getElementById('pagination');
    var html = '';
    if(curPage > pageTotal) {
        curPage = 1;
    }
    /*总页数小于5，全部显示*/
    if(pageTotal <= 5) {
        html = appendItem(pageTotal, curPage, html);
        paginationId.innerHTML = html;
    }
    /*总页数大于5时，要分析当前页*/
    if(pageTotal > 5) {
        if(curPage <= 4) {
            html = appendItem(pageTotal, curPage, html);
            paginationId.innerHTML = html;
        } else if(curPage > 4) {
            html = appendItem(pageTotal, curPage, html);
            paginationId.innerHTML = html;
        }
    }
    $("#pagination div").on('click', function() {
        var pageIndex = parseInt($(this).html());
        console.log(pageIndex);
        pageOptions.curPage = pageIndex || 1;
        dynamicPagingFunc(pageOptions);
        console.log(pageOptions + "---" + search_name_l);
        GetPlayerList(search_name_l, pageIndex, 12)
    })
}

function appendItem(pageTotal, curPage, html) {
    //    console.log("pageTotal:" + pageTotal + "\n" + "curPage" + curPage + "\n" + "html" + html)
    var starPage = 0;
    var endPage = 0;

    html += '<span href="#" id="prevBtn">&lt;</span>';
    if(pageTotal <= 5) {
        starPage = 1;
        endPage = pageTotal;
    } else if(pageTotal > 5 && curPage <= 4) {
        starPage = 1;
        endPage = 4;
        if(curPage == 4) {
            endPage = 5;
        }
    } else {
        if(pageTotal == curPage) {
            starPage = curPage - 3;
            endPage = curPage;
        } else {
            starPage = curPage - 2;
            endPage = curPage + 1;
        }
        html += '<div id="first">1</div><span>...</span>';
    }

    for(let i = starPage; i <= endPage; i++) {
        console.log(i + '\n' + endPage)
        console.log(i == endPage)

        if(i == curPage) {
            html += '<div id="active">' + i + '</div>';
        } else {
            html += '<div>' + i + '</div>';
        }
    }
    if(pageTotal <= 5) {
        html += '<span href="#"  id="nextBtn">&gt;</span>';
    } else {
        if(curPage < pageTotal - 2) {
            html += '<span>...</span>';
        }
        if(curPage <= pageTotal - 2) {
            html += '<div>' + pageTotal + '</div>';
        }
        html += '<span href="#" id="nextBtn">&gt;</span>';
    }
    return html;
}

转载于:https://www.cnblogs.com/llllpzyy/p/11003745.html