[英]dynamic HTML pagination using javascript
I have the following pagination control 我有以下分页控制
The code for this in index.html (initial state) : index.html中的代码(初始状态):
<ul id="page_paging">
<li><a href="#previous_section"><</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">></a></li>
</ul>
in javascript I'm attaching an event listener: 在javascript中,我附加了事件监听器:
document.getElementById("page_paging").addEventListener("click", LoadPages);
and then in the function I'm generating the list of pages according to what the user clicks 然后在功能中,我根据用户单击的内容生成页面列表
function generateUL(minPage, maxPage, newActivePage){
var innerHtml = "<li><a href=\"#previous_section\"><</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\">></a></li>" ;
return innerHtml;
}
the although the returned html looks exactly the same as the initial state "original one" -- the control looses the spaces between the circles 尽管返回的html看起来与初始状态“原始状态”完全相同-控件会松散圆圈之间的空格
the result html: 结果html:
<ul id="page_paging">
<li><a href="#previous_section"><</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">></a></li>
</ul>
and how the control looks 以及控件的外观
Does anyone have a clue for the reason why this is happening and how to solve it? 是否有人知道发生这种情况的原因以及如何解决?
The result HTML has different ID ("episode_paging") so CSS is likely different. 结果HTML具有不同的ID(“ episode_paging”),因此CSS可能有所不同。 When it comes to the CODE itself instead of "#previous_section" I would use "data-page" or similar approach, belowe plain JS boilerplate:
当涉及到代码本身而不是“ #previous_section”时,我将使用“数据页”或类似的方法,下面是普通的JS样板:
<ul id="episode_paging">
<li><a data-prev="1" href="#"><</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="#">></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>
just use a css like 像这样使用CSS
.page_paging li {
padding-left: 2px !important;
padding-right: 2px !important;
}
For your function, I would do like this 为了您的功能,我会这样
function generateUL(minPage, maxPage, newActivePage){
var innerHtml = "<li><a href=\"#previous_section\"><</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\">></a></li>" ;
return innerHtml;
}
Example CSS: CSS示例:
#episode_paging li {
padding: 0 2px !important;
}
#episode_paging li a {
padding: 0 2px !important;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.