Is it possible to use jQuery to dynamically reset values?

Question

Is it possible to use jQuery to dynamically reset values?

I am currently working on paginating a section.

The pagination is functioning properly, but I would like to know if it is possible to reset the pagination dynamically based on the number received from an input using jQuery.

For example:

In my current pagination setup, it displays numbers like 1 2 3.

Now, let's say I receive the number 100.

At this point, the pagination section should reset to 100, with 100 being the active element and the sequential numbers appearing as 100 101 102.

If 101 happens to be the last page, then it should highlight 100 as the active number and 101 as the last one.

Similarly, if I enter 50, the pagination section should reset to show numbers like 50, 51, 52 with 50 being highlighted.

I have been attempting to implement this functionality in my code snippet below.

Firstly, how can the pagination detect that a number has been entered into the input text field (as per the alert message written in JavaScript)?

Any advice or suggestions are greatly appreciated.

javascript jquery html css pagination

Answer 1

Answer №1

Feel free to give this a try, it might be helpful for you

$(document).ready(function(){
 $( "#paging" ).keyup(function() {
   var value = this.value;
   if(!value || value < 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(value);
    value++;
   }
  });
 });
});

In the HTML code, an input box has been included

<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>

The script will capture input values on keyup, and you have the flexibility to customize this event as needed. Thank you.

Answer 2

Feel free to give this a try, it might be helpful for you

$(document).ready(function(){
 $( "#paging" ).keyup(function() {
   var value = this.value;
   if(!value || value < 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(value);
    value++;
   }
  });
 });
});

In the HTML code, an input box has been included

<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>

The script will capture input values on keyup, and you have the flexibility to customize this event as needed. Thank you.

Answer 3

Answer №2

For tackling this issue, I opted for a straightforward and uncomplicated approach. I established a function that triggers upon clicking the textbox where the page number is inputted, and within that function, I executed the following code:

function updatePageNumbers()
{
   var pageNumber = 27; // Assuming 27 is the starting number
   $('#pageNumber1').html(27);
   $('#pageNumber2').html(28); // Add 1
   $('#pageNumber3').html(29); // Add 2
}

Answer 4

For tackling this issue, I opted for a straightforward and uncomplicated approach. I established a function that triggers upon clicking the textbox where the page number is inputted, and within that function, I executed the following code:

function updatePageNumbers()
{
   var pageNumber = 27; // Assuming 27 is the starting number
   $('#pageNumber1').html(27);
   $('#pageNumber2').html(28); // Add 1
   $('#pageNumber3').html(29); // Add 2
}

Is it possible to use jQuery to dynamically reset values?

Answer №1

Answer №2

Similar questions

npm installation for phonegap failed due to shasum check discrepancy

Activate the horizontal scrollbar within each flex item when it is stretched beyond its original width

Dynamic line breaks within an unordered list

The right floating behavior with <li> elements seems to be malfunctioning

Mistakes in validating email form

Trigger the function upon successful completion of Stripe Checkout

Automatically loading a div using jQuery after a delay of 5 seconds

Implementing multiple lists in a dropdown menu in React and dynamically displaying one based on the state

How to efficiently parse JSON objects in JavaScript after receiving them from Django

What are the steps for implementing if-else statements in JavaScript when working with multiple dropdown lists?

Error in D3: The property "age" is not defined

pino-tea's logging feature suddenly halts after processing a few hundred lines

Customizing Ng-Bootstrap styles and restructuring the HTML layout for Typeahead implementation

Resolved: Angular JS resolves circular dependencies

Div elements shifted to the right instead of appearing on a new line

Activating/Deactivating Textbox on Internet Explorer 9 using Javascript

React's performance severely lags when traversing through JSON data

Unable to load nested iframe

Clicking on the Ng button will display a datepicker in Onsen UI

Connect your Flask/Dash application to a customized Bootstrap stylesheet stored locally