如果我在最后一页上，则右导航箭头应该不可见

Question

I have news list in which new news is adding dynamically by appending 'li' to 'ul'.Its almost worked but the issue is all function are working on ONCLICK so when I go last news list page the right navigation is visible and when I click on that its get hide.

So I want if I am on the last page right navigation arrow should be invisible.

This css to hide navigation arrows.

.iconWrap.left,.hide-right{display: none;} .iconWrap.left-nav {display: block;}

This is navigation arrows structure:

 <div class="iconWrap left"><a onclick="leftarrow()" id="leftNav"></a></div>
 <div class="iconWrap right"><a onclick="rightarrow()" id="rightNav"></a></div>

This is UL structure where li get append:

<ul id="news-list">----- Here all li adds dynamically----</ul>

this is the function to calculate records per page, total records:

function NewsList(page, num_Per_Page){
    $("#news-list").html("");
    var start = parseInt(num_Per_Page) * parseInt(page);
    var end = start + parseInt(num_Per_Page);
    if(current_Page > 0){
        $(".iconWrap.left").addClass("left-nav");
    } else {
        $(".iconWrap.left").removeClass("left-nav");
    }
    for(var z=start; z<end; z++){
    if(news[z] == undefined) continue;
        $("#news-list").append('<li><a href="#">--li data here--</a></li>');
    }
}

below functions calling for navigation arrows:

function leftarrow(){
    if(current_Page > 0){
        current_Page--;                        
        populateNewsList(current_Page, num_Records_PerPage);
    }
}

function rightarrow() {
    if((current_Page + 1) != (Math.ceil(<?=count($this->news)?>/num_Records_PerPage))){
        current_Page++;
        populateNewsList(current_Page, num_Records_PerPage);                      
    } else {
        $(".iconWrap.right").addClass("hide-right");
    }
}

Answer 1

You could make it work even when function is executed onclick

Create a global variable that keeps count of total number of pages:

var totalPages = Math.ceil(<?=count($this->news)?>/num_Records_PerPage))

You should make the logic of user interface different from the rest of the code. Call the function after every time 'arrows' are clicked.

function showArrows() {
    if (currentPage > 1)
        $(".iconWrap.left").addClass("left-nav");
    else
        $(".iconWrap.left").removeClass("left-nav");

    if (currentPage >= totalPages)
        $(".iconWrap.right").addClass("hide-right");
    else
        $(".iconWrap.right").removeClass("hide-right");
}

function NewsList(page, num_Per_Page){
    $("#news-list").html("");
    var start = parseInt(num_Per_Page) * parseInt(page);
    var end = start + parseInt(num_Per_Page);

    for(var z=start; z<end; z++){
        if(news[z] == undefined) continue;
        $("#news-list").append('<li><a href="#">--li data here--</a></li>');
    }
}


function leftarrow(){
    if(current_Page > 0){
        current_Page--;                        
        populateNewsList(current_Page, num_Records_PerPage);
    }
    showArrows();
}

function rightarrow() {
    if((current_Page + 1) != totalPages){
        current_Page++;
        populateNewsList(current_Page, num_Records_PerPage);                      
    } 
    showArrows();   // Call it every time arrows are clicked
}

You could also call showArrows() when the documents completes loading to set initial value