使用 javascript 的动态 HTML 分页

Posted

技术标签:

【中文标题】使用 javascript 的动态 HTML 分页【英文标题】:dynamic HTML pagination using javascript 【发布时间】:2020-01-13 11:51:10 【问题描述】:

我有以下分页控件

index.html 中的代码(初始状态):

<ul id="page_paging">
    <li><a href="#previous_section">&lt;</a></li>
    <li id= "active_page" class="active"><span>1</span></li>
    <li><a href="#previous_section">2</a></li>
    <li><a href="#previous_section">3</a></li>
    <li><a href="#previous_section">4</a></li>
    <li><a href="#previous_section">5</a></li>
    <li><a href="#previous_section">&gt;</a></li>
</ul>

javascript 中我附加了一个事件监听器:

document.getElementById("page_paging").addEventListener("click", LoadPages);

然后在函数中,我根据用户点击的内容生成页面列表

function generateUL(minPage, maxPage, newActivePage)
    var innerHtml = "<li><a href=\"#previous_section\">&lt;</a></li>";

    for (var pageIdx = minPage; pageIdx <= maxPage; pageIdx++) 
    
        if( pageIdx == newActivePage)  
            innerHtml += "<li id= \"active_page\" class=\"active\"><span>" + pageIdx + "</span></li>";
        
        else
            innerHtml += "<li><a href=\"#previous_section\">" + pageIdx + "</li>";
        
    
    innerHtml += "<li><a href=\"#previous_section\">&gt;</a></li>" ;  

    return innerHtml;

虽然返回的 html 看起来与初始状态“原始的”完全相同 - 控件松散了圆圈之间的空格

结果html:

<ul id="page_paging">
    <li><a href="#previous_section">&lt;</a></li>
    <li id="active_page" class="active"><span>1</span></li>
    <li><a href="#previous_section">2</a></li>
    <li><a href="#previous_section">3</a></li>
    <li><a href="#previous_section">4</a></li>
    <li><a href="#previous_section">5</a></li>
    <li><a href="#previous_section">&gt;</a></li>
</ul>

以及控件的外观

有没有人知道为什么会发生这种情况以及如何解决它?

【问题讨论】:

【参考方案1】:

结果 HTML 具有不同的 ID(“episode_paging”),因此 CSS 可能不同。 当涉及到代码本身而不是“#previous_section”时,我会使用“数据页”或类似的方法,下面是普通的 JS 样板:

<ul id="episode_paging">
    <li><a data-prev="1" href="#">&lt;</a></li>
    <li id="active_page" class="active"><span>1</span></li>
    <li><a href="#" data-page="2">2</a></li>
    <li><a href="#" data-page="3">3</a></li>
    <li><a href="#" data-page="4">4</a></li>
    <li><a href="#" data-page="5">5</a></li>
    <li><a data-next="1" href="#">&gt;</a></li>
</ul>
<script>
    var inputElem = document.getElementById("episode_paging").getElementsByTagName("a");
    for (var i = 0; i < inputElem.length; i++) 

        inputElem[i].addEventListener('click', function () 
            if (this.getAttribute("data-page"))
                alert(this.getAttribute("data-page"));
        , false);
    
</script>

【讨论】:

“episode_paging”是一个错误的“复制粘贴”,从我的代码到代码中的 *** 两者都具有相同的 ID,我在我的问题中编辑了代码。至于数据页与 href 到 previous_section,一旦用户单击页面滚动到 previous_section 的项目之一,它必须保持原样。【参考方案2】:

只需使用类似的 CSS

.page_paging li 
  padding-left: 2px !important;
  padding-right: 2px !important;

对于你的功能,我会这样做

function generateUL(minPage, maxPage, newActivePage)
    var innerHtml = "<li><a href=\"#previous_section\">&lt;</a></li>";
    for (var pageIdx = minPage; pageIdx <= maxPage; pageIdx++) 
    

        if( pageIdx == newActivePage)  
            var liElement = "<li id= \"active_page\" class=\"active\"><span>" + pageIdx + "</span></li>";
        
        else
            var liElement = "<li><a href=\"#previous_section\" >" + pageIdx + "</li>";
        
        innerHtml += liElement;
    

    innerHtml += "<li><a href=\"#previous_section\">&gt;</a></li>" ;  

    return innerHtml;

【讨论】:

关于代码,同意。 CSS没有改变任何东西:( 尝试把 !important 放到你的 CSS 中【参考方案3】:

示例 CSS:

#episode_paging li 
    padding: 0 2px !important;


#episode_paging li a 
    padding: 0 2px !important;

【讨论】:

以上是关于使用 javascript 的动态 HTML 分页的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript实现的分页功能[用于搭配后台使用]

html 简单的javascript分页

javascript实例学习之四——javascript分页

javascript分页

封装javascript分页插件——可以使用的测试版(β版)

Oracle -Mybatis动态SQL查询分页的实现