Pagination : Hapus elemen menggunakan jquery?

Saya memiliki bagian di mana saya harus membuat halaman catatan. Sekarang masalahnya adalah nomornya ditambahkan tetapi saya ingin menghapus nomor sebelumnya

Saat ini saya mengalami sesuatu seperti di bawah ini:

Sebelumnya 1 2 3 Selanjutnya

Ketika saya mengklik berikutnya 4 ditambahkan dan menjadi Sebelumnya 1 2 3 4 Berikutnya

Ketika saya mengklik berikutnya lagi 5 ditambahkan dan menjadi Sebelumnya 1 2 3 4 5 Berikutnya

Apa yang saya coba lakukan dan apa yang harus saya miliki

Sebelumnya 1 2 3 Selanjutnya

Ketika saya mengklik berikutnya 4 akan ditambahkan dan itu akan menjadi Sebelumnya 2 3 4 Berikutnya

Ketika saya mengklik berikutnya lagi 5 ditambahkan dan menjadi Sebelumnya 3 4 5 Berikutnya

Ketika saya mengklik Sebelumnya Sekarang seharusnya Sebelumnya 2 3 4 Berikutnya

Silakan temukan kode runnable saya di bawah ini:

$('ul.pagination').on('click', 'a', function() { // listen for click on pagination link
    if($(this).hasClass('active')) return false;
  
    var active_elm = $('ul.pagination a.active');
  
    if(this.id == 'next'){
      var _next = active_elm.parent().next().children('a');
      if($(_next).attr('id') == 'next') {
        
        // appending next button if reach end
        var num = parseInt($('a.active').text())+1;
        active_elm.removeClass('active');
        $('<li><a class="active" href="/id#">'+num+'</a></li>').insertBefore($('#next').parent());
        return; 
      }
      _next.addClass('active');   
      
      
      
      
    }
    else if(this.id == 'prev') {
      var _prev = active_elm.parent().prev().children('a');
      if($(_prev).attr('id') == 'prev') return false;
      _prev.addClass('active');   
    } else {
      $(this).addClass('active');
    }
    active_elm.removeClass('active');
    
});
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
}

ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

div.center {text-align: center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center">
  <ul class="pagination">
    <li><a id="prev">«</a></li>
    <li><a id="test1" href="/id#">1</a></li>
    <li><a id="test2" class="active" href="/id#">2</a></li>
    <li><a href="/id#">3</a></li>
    <li><a href="/id#" id="next">»</a></li>
  </ul>
</div>


javascript html pagination jquery css
person sTg    schedule 28.11.2016    source sumber
comment
saya telah menambahkan html juga   -  person sTg    schedule 28.11.2016
comment
paginationjs.com   -  person mplungjan    schedule 28.11.2016
comment
Menambahkan cuplikan.   -  person sTg    schedule 28.11.2016
comment
stackoverflow.com/questions/18679611/   -  person mplungjan    schedule 28.11.2016
comment
@sTg Anda hanya ingin batas tombol 3 halaman?   -  person Beginner    schedule 28.11.2016
comment
@NewbeeDev Ya saya telah menyebutkan persyaratannya   -  person sTg    schedule 28.11.2016
comment
Ini permulaannya: var $first = $("#prev").parent().next(); _next = $first.find("a");_next.text(num); $first.insertBefore($('#next').parent());   -  person mplungjan    schedule 28.11.2016

Jawaban (3)


arrow_upward
5
arrow_downward

Inilah cara saya melakukannya.
Saya akan menambahkan kelas ke 3 tag <li> dengan nomor di dalamnya untuk memudahkan akses dengan pemilih jQuery. Di dalam pernyataan if tempat Anda memeriksa cuaca, tombol berikutnya memiliki id next, hapus anak pertama seperti ini:

$('.three_links').first().remove();

dan tambahkan nomor berikutnya setelah anak terakhir seperti ini:

$('.three_links').last().after('<li class="three_links"><a class="active" href="/id#">'+num+'</a></li>');

dan jika idnya adalah prev hapus anak terakhir dan tambahkan nomor sebelumnya sebelum anak pertama tetapi hanya jika nomor sebelumnya lebih besar dari 1:

if(num > 0){
    active_elm.removeClass('active');
    $('.three_links').last().remove();
    $('.three_links').first().before('<li class="three_links"><a class="active" href="/id#">'+num+'</a></li>');
}

Ini adalah jsfiddle yang berfungsi.

html:

<div class="center">
    <ul class="pagination">
        <li><a href="/id#" id="prev">«</a></li>
        <li class="three_links"><a id="test1" href="/id#">1</a></li>
        <li class="three_links"><a id="test2" class="active" href="/id#">2</a></li>
        <li class="three_links"><a id="test3" href="/id#">3</a></li>
        <li><a href="/id#" id="next">»</a></li>
    </ul>
</div>

js:

$('ul.pagination').on('click', 'a', function() { // listen for click on pagination link
    if($(this).hasClass('active')) return false;

    var active_elm = $('ul.pagination a.active');

    if(this.id == 'next'){
        var _next = active_elm.parent().next().children('a');
        if($(_next).attr('id') == 'next') {

            // appending next button if reach end
            var num = parseInt($('a.active').text())+1;
            active_elm.removeClass('active');
            $('.three_links').first().remove();
            $('.three_links').last().after('<li class="three_links"><a class="active" href="/id#">'+num+'</a></li>');
            return; 
        }
        _next.addClass('active');   
    }
    else if(this.id == 'prev') {
        var _prev = active_elm.parent().prev().children('a');
        if($(_prev).attr('id') == 'prev'){
            var num = parseInt($('a.active').text())-1;
            if(num > 0){
                active_elm.removeClass('active');
                $('.three_links').last().remove();
                $('.three_links').first().before('<li class="three_links"><a class="active" href="/id#">'+num+'</a></li>');
            }
            return;
        }
        _prev.addClass('active');   
    } else {
        $(this).addClass('active');
    }
    active_elm.removeClass('active');
});
person Timo    schedule 28.11.2016

arrow_upward
6
arrow_downward

Gunakan ini setelah menambahkan nomor berikutnya

$('#prev').parent().next().remove();

http://codepen.io/mastersmind/pen/ZBJZjo

person mastermind    schedule 28.11.2016
comment
Bagaimana saya harus melakukannya sebelumnya? - person sTg; 28.11.2016

arrow_upward
1
arrow_downward

Gunakan skrip di bawah ini:

$('ul.pagination').on('click', 'a', function() { // listen for click on pagination link
    if($(this).hasClass('active')) return false;

    var active_elm = $('ul.pagination a.active');

    if(this.id == 'next'){
      var _next = active_elm.parent().next().children('a');
      if($(_next).attr('id') == 'next') {

        // appending next button if reach end
        var num = parseInt($('a.active').text())+1;
        active_elm.removeClass('active');
        $('<li><a class="active" href="/id#">'+num+'</a></li>').insertBefore($('#next').parent());
        var hidenum = parseInt($('a.active').text())-2;
        if(hidenum > 0){
            $('#next').parent().prev().prev().prev().prev().hide();
        }
        return; 
      }
      _next.addClass('active');   




    }
    else if(this.id == 'prev') {
      var _prev = active_elm.parent().prev().children('a');
      if($(_prev).attr('id') == 'prev') return false;
      _prev.addClass('active'); 
    } else {
      $(this).addClass('active');
    }
    active_elm.removeClass('active');

});
person Prashant Valanda    schedule 28.11.2016