özyükleme Sayfalama sonraki önceki işe

Question

$(document).ready(function(){ 
    var defaultcount=7; 
    $(".pagination").append("<li class='page-item mainactive mynxt'><a class='page-link' href='#' aria-label='Previous'><span aria-hidden='true'>&laquo;</span><span class='sr-only'>Previous</span></a></li>") 
    for(dc=1;dc<=defaultcount;dc++) 
    { 
    if(dc==1){ 
     $(".pagination").append("<li id='idactive"+dc+"' class='active mainactive'><a href=#>"+dc+"</a></li>"); 
    } 
    else{ 
     $(".pagination").append("<li id='idactive"+dc+"' class='mainactive'><a href=#>"+dc+"</a></li>"); 
    } 
    } 
    $(".pagination").append("<li class='page-item mainactive' id='mynext'><a class='page-link' href='#' aria-label='Next'><span aria-hidden='true'>&raquo;</span><span class='sr-only'>Next</span></a></li>") 

}); 

Sayfalama fonksiyonu

$(document).on("click",'.pagination li',function(){ 
    $(".mainactive").removeClass('active'); 
    $(this).addClass('active'); 
    console.log($(this).attr('id')); 
    pagenumber=$(this).text(); 
    console.log("The button number is-->"+$(this).text()); 
}); 

Answer 1

$(document).ready(function() { 
 
    var pageItem = $(".pagination li").not(".prev,.next"); 
 
    var prev = $(".pagination li.prev"); 
 
    var next = $(".pagination li.next"); 
 

 
    pageItem.click(function() { 
 
    pageItem.removeClass("active"); 
 
    $(this).not(".prev,.next").addClass("active"); 
 
    }); 
 

 
    next.click(function() { 
 
    $('li.active').removeClass('active').next().addClass('active'); 
 
    }); 
 

 
    prev.click(function() { 
 
    $('li.active').removeClass('active').prev().addClass('active'); 
 
    }); 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav> 
 
    <ul class="pagination"> 
 
    <li class="prev"> 
 
     <a href="#" aria-label="Previous"> 
 
     <span aria-hidden="true">&laquo;</span> 
 
     </a> 
 
    </li> 
 
    <li><a href="#">1</a> 
 
    </li> 
 
    <li><a href="#">2</a> 
 
    </li> 
 
    <li><a href="#">3</a> 
 
    </li> 
 
    <li><a href="#">4</a> 
 
    </li> 
 
    <li><a href="#">5</a> 
 
    </li> 
 
    <li class="next"> 
 
     <a href="#" aria-label="Next"> 
 
     <span aria-hidden="true">&raquo;</span> 
 
     </a> 
 
    </li> 
 
    </ul> 
 
</nav>

});