Question

我有一个我分页的部分。

分页工作正常，但是可以根据inputtext使用jquery收到的号码动态重置分页。

例如：

在我的分页中，它会显示1 2 3。

现在我得到一个号码100。

因此，分页部分应重置为100，其中100为有效元素，数字为100 101 102。

现在，如果101是最后一页。然后应该突出显示100号码和101号码。

我再次输入50 因此，分页部分应重置为50 51 52，其中50突出显示。

当我尝试时，它会非常糟糕地破坏流量。以下是我一直在做的事情。

首先，分页会如何检测在文本框中输入的数字（我用javascript编写的提醒）。

任何建议都非常感谢。

$('ul.pagination').on('click', 'a', function() { // listen for click on pagination link

var a=+50;
alert("number received"+a);
    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="#">'+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="#">'+num+'</a></li>');
        }
        return;
      }
      _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 href="#" id="prev">«</a></li>
    <li class="three_links"><a id="test1" href="#">1</a></li>
    <li class="three_links"><a id="test2" class="active" href="#">2</a></li>
    <li class="three_links"><a id="test3" href="#">3</a></li>
    <li><a href="#" id="next">»</a></li>
  </ul>
</div>

Answer 1

你可以试试这个，可能对你有所帮助

$(document).ready(function(){
 $( "#paging" ).keyup(function() {
   var val = this.value;
   if(!val || val < 1){return;}
   $( ".pagination li a" ).removeClass( "active" );
   $( ".pagination li" ).each(function(index, event) {
    if(index != 0 && index != 4){
    if(index == 1){
     $( this ).children('a').addClass( "active" );
    }
    $( this ).children('a').text(val);
    val++;
   }
  });
 });
});

在HTML中，我添加了一个输入框

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

它将从keyup上的输入中获取值，您可以根据需要更改此keyup事件。感谢。

Answer 2

我使用了一个非常基本和简单的解决方案。我创建了一个函数onclick of textbox，其中输入了页码，我在函数中执行了以下操作：

function test()
{
   var num = 27 //Assuming 27 is the number
   $('#test1').html(27);
   $('#test2').html(28);//Add 1
   $('#test3').html(29); // Add 2
}

使用jquery动态重置值？

2 个答案: