Saya mencoba membuat pagination javascript sederhana (hanya tombol berikutnya sebelumnya) untuk tautan <li>
saya. ini daftar tautan saya:
<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="/idjavascript:prevPage()" id="btn_prev">previous</a></li>
<li><a href="/idjavascript:nextPage()" id="btn_next">next</a></li>
</ul>
</div>
Saya menggunakan bootstrap css. Saya tidak ingin menggunakan jquery. kode saya hampir berfungsi.
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);
};
Tapi masalahnya adalah var objJson = []
Saya ingin menggunakan style="display: block;"
untuk halaman1 dan meletakkan style="display: none;"
untuk link lainnya. ketika halaman berubah, gaya juga berubah.
Diperbarui:
Saya meletakkan tautan saya langsung di dalam <ul>
Saya pikir itu bukan ide yang baik untuk memasukkannya ke dalam skrip java dan hanya menampilkan sebagian saja, Perbedaannya adalah: Google mempertimbangkan semua tautan di dalam <ul></ul>
tetapi ketika saya memasukkannya ke dalam javascript hanya halaman 1 yang ada di <ul></ul>
. Saya harus mendapatkan semua tautan dengan:
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";
}
dan perbarui gaya untuk halaman 1 menjadi style="display: block;"
<li><a href="http://site1.com" rel="nofollow">Description1</a></li>
) dibuat secara dinamis denganobjJson
Anda? - person Steeve Pitis   schedule 11.10.2016<ul class="paging"></ul>
Saya rasa saya harus menghapusvar objJson = []
dan mengubah kode di dalamnya. @SteevePitis - person محمد علی پور فتحک   schedule 11.10.2016initPages
saya - person Steeve Pitis   schedule 11.10.2016