使用 javascript 的动态 HTML 分页

Posted 2023-03-28

【中文标题】使用 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;