Я пытаюсь сделать простую (только следующие предыдущие кнопки) разбивку на страницы javascript для моих ссылок <li>
. это мой список ссылок:
<div class="panel-body">
<div id="listingTable">
<ul id = "Mylinks" class="paging">
<li style="display: none;"><a href="http://site1.com" rel="nofollow">Description1</a></li>
<li style="display: none;"><a href="http://site2.com" rel="nofollow">Description2</a></li>
<li style="display: none;"><a href="http://site3.com" rel="nofollow">Description3</a></li>
<li style="display: none;"><a href="http://site4.com" rel="nofollow">Description4</a></li>
<li style="display: none;"><a href="http://site5.com" rel="nofollow">Description5</a></li>
<li style="display: none;"><a href="http://site6.com" rel="nofollow">Description6</a></li>
<li style="display: none;"><a href="http://site7.com" rel="nofollow">Description7</a></li>
<li style="display: none;"><a href="http://site100.com" rel="nofollow">Description100</a></li>
//Number of links is unlimited.
</ul>
</div>
<ul class="pager">
<li><a href="javascript:prevPage()" id="btn_prev">previous</a></li>
<li><a href="javascript:nextPage()" id="btn_next">next</a></li>
</ul>
</div>
Я использую бутстрап css. Я не хочу использовать jquery. мой код почти работает.
var current_page = 1;
var records_per_page = 3;
function prevPage()
{
if (current_page > 1) {
current_page--;
changePage(current_page);
}
}
function nextPage()
{
if (current_page < numPages()) {
current_page++;
changePage(current_page);
}
}
function changePage(page)
{
var btn_next = document.getElementById("btn_next");
var btn_prev = document.getElementById("btn_prev");
var listing_table = document.getElementById("listingTable");
var page_span = document.getElementById("page");
// Validate page
if (page < 1) page = 1;
if (page > numPages()) page = numPages();
var list = document.getElementById('linkbox'),items = list.childNodes;
for (var i = (page-1) * records_per_page; i < (page * records_per_page) && i < childNodes.length; i++) {
items[i].style.display = "block";
}
}
page_span.innerHTML = page + "/" + numPages();
if (page == 1) {
btn_prev.style.visibility = "hidden";
} else {
btn_prev.style.visibility = "visible";
}
if (page == numPages()) {
btn_next.style.visibility = "hidden";
} else {
btn_next.style.visibility = "visible";
}
}
function numPages()
{
return Math.ceil(objJson.length / records_per_page);
}
window.onload = function() {
changePage(1);
};
Но проблема в том, что var objJson = []
я хочу использовать style="display: block;"
для страницы 1 и поставить style="display: none;"
для остальных ссылок. когда страница меняется, стиль тоже меняется.
Обновлено:
Я размещаю свои ссылки непосредственно внутри <ul>
. Я думаю, что это не очень хорошая идея помещать их в java-скрипт и показывать только их части. Разница в том, что Google рассматривает все ссылки внутри <ul></ul>
, но когда я помещаю их в javascript, только страница 1 находится в <ul></ul>
. Я должен получить все ссылки:
var list = document.getElementById('Mylinks'),
items = list.childNodes;
for (var i = 0, length = childNodes.length; i < length; i++)
{
if (items[i].nodeType != 1) {
continue;
}
items[i].style.display = "block";
}
и обновить стили для страницы 1 до style="display: block;"
<li><a href="http://site1.com" rel="nofollow">Description1</a></li>
) создаются динамически с вашимobjJson
? - person Steeve Pitis   schedule 11.10.2016<ul class="paging"></ul>
я думаю, что я должен удалитьvar objJson = []
и изменить код внутри. @StevePitis - person محمد علی پور فتحک   schedule 11.10.2016initPages
- person Steeve Pitis   schedule 11.10.2016