การแบ่งหน้า JavaScript อย่างง่ายสำหรับ ‹li›‹a href

ฉันกำลังพยายามสร้างการแบ่งหน้าจาวาสคริปต์แบบง่าย (เฉพาะปุ่มถัดไปก่อนหน้า) สำหรับลิงก์ <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="/thjavascript:prevPage()" id="btn_prev">previous</a></li>
      <li><a href="/thjavascript:nextPage()" id="btn_next">next</a></li>
    </ul>
</div>

ฉันใช้ bootstrap 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> ฉันคิดว่ามันไม่ดีเลยที่จะใส่ลิงก์เหล่านั้นในจาวาสคริปต์และแสดงเพียงบางส่วนเท่านั้น ความแตกต่างคือ: google พิจารณาลิงก์ทั้งหมดภายใน <ul></ul> แต่เมื่อฉันใส่ลิงก์เหล่านั้นในจาวาสคริปต์ มีเพียงหน้าที่ 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;"


javascript pagination
person محمد علی پور فتحک    schedule 11.10.2016    source แหล่งที่มา
comment
ลิงก์ของคุณ (<li><a href="http://site1.com" rel="nofollow">Description1</a></li>) ถูกสร้างขึ้นแบบไดนามิกด้วย objJson ?   -  person Steeve Pitis    schedule 11.10.2016
comment
แบบไดนามิก แต่ด้วย php โดยตรงภายใน <ul class="paging"></ul> ฉันคิดว่าฉันควรลบ var objJson = [] และเปลี่ยนรหัสภายใน @SteevePitis   -  person محمد علی پور فتحک    schedule 11.10.2016
comment
Arf ฉันได้ทำบางอย่างกับ objJson แล้ว ลองทำเช่นเดียวกันกับ php และลบ initPages ของฉันออก   -  person Steeve Pitis    schedule 11.10.2016

คำตอบ (1)


arrow_upward
0
arrow_downward

ถ้าฉันเข้าใจสิ่งที่คุณต้องการ มันจะง่ายกว่าถ้าพูดว่า <ul> แสดงถึงหนึ่งหน้า

ตามนี้ คุณสามารถทำสิ่งนี้:

var current_page = 1;
var records_per_page = 3;

var objJson = [
    { adName: "AdName 1"},
    { adName: "AdName 2"},
    { adName: "AdName 3"},
    { adName: "AdName 4"},
    { adName: "AdName 5"},
    { adName: "AdName 6"},
    { adName: "AdName 7"},
    { adName: "AdName 8"},
    { adName: "AdName 9"},
    { adName: "AdName 10"}
]; // Can be obtained from another source, such as your objJson variable

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 page_span = document.getElementById("page");

    // Validate page
    if (page < 1) page = 1;
    if (page > numPages()) page = numPages();

    if(document.querySelector('.current')) document.querySelector('.current').classList.remove('current');
    document.getElementById('page'+page).classList.add('current')
    
    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);
}

function initPages() {
  var ul;
  var container = document.getElementById("listingTable");
  for(var i = 0; i<objJson.length; i++) {
    if(i%records_per_page === 0){
      ul = document.createElement('ul');
      ul.className = "paging";
      ul.id = "page"+ ((i/records_per_page)+1);
      container.appendChild(ul);
    }
    
    var li = document.createElement('li');
    var a = document.createElement('a');
    a.href = '#';
    a.innerHTML = objJson[i].adName;
    li.appendChild(a);
    ul.appendChild(li);
  }
  changePage(1);
}

window.onload = function() {
    initPages();
    
};
.paging {
  display: none; 
}

.paging.current{
  display: block;
}
<div class="panel-body">
    <div id="listingTable">
    </div>
    <ul class="pager">
      <li><a href="/thjavascript:prevPage()" id="btn_prev">قبلی</a></li>
      <li><a href="/thjavascript:nextPage()" id="btn_next">بعدی</a></li>
    </ul>
</div>
<span id="page"></span>

person Steeve Pitis    schedule 11.10.2016
comment
ขอบคุณสำหรับการเล่นซ้ำของคุณ แต่ฉันต้องการใส่ลิงค์ของฉันโดยตรงใน html ฉันไม่ต้องการใส่มันไว้ใน javascript var objJson = [] google ลองพิจารณาลิงค์ข้างใน ‹ul› เมื่อฉันใส่พวกมันใน javascript จะพิจารณาเฉพาะบางส่วนที่อยู่ใน html เท่านั้น ฉันจะลบ var objJson = [] โดยสมบูรณ์ และใช้ var list = document.getElementById('list_name'), items = list.childNodes; for (var i = 0, length = childNodes.length; i < length; i++) { if (items[i].nodeType != 1) { continue; } items[i].innerHTML = "<a>text</a>"; } ในการค้นหา ‹li› และแสดงเฉพาะหน้า 1 - person محمد علی پور فتحک 11.10.2016
comment
จากนั้นด้วย php ของคุณ คุณเพียงแค่ต้องทำตามโครงสร้างเดียวกับที่ฉันสร้าง <ul class='paging' id='page1'><li ... /></ul> ลบ initPages() ของฉันออก และโค้ดนี้จะยังคงทำงานต่อไป - person Steeve Pitis; 11.10.2016
comment
โปรดดูคำถามที่อัปเดต! @สตีฟ ปิติส - person محمد علی پور فتحک 11.10.2016
comment
คุณช่วยตรวจสอบได้ไหมว่าทำไม items[i].style.display = "block"; ไม่ทำงาน ฉันเขียนโค้ดทั้งหมดด้านบน @Steeve Pitis ใหม่ - person محمد علی پور فتحک 11.10.2016
comment
var items = document.querySelectorAll('#Mylinks li'); for (var i = 0, length = item.length; i < length; i++) { items[i].style.display = "block"; } ลองทำเช่นนี้ - person Steeve Pitis; 11.10.2016