Home / Questions / 303751
Accepted
Alberto Siurob
Asked: 2020-10-26 16:21:51 +0800 CST 2020-10-26 16:21:51 +0800 CST

Homemade Javascript pager does not work as I need

  • 772

I'm making a data pager, but I'm already stuck. I have two problems. I want it to jump from 10 to 10 elements and it does so from 20 to 20, I don't know why. I need to set a limit, that is, it does not bring me all from a given index, but only 10 from that index, or whatever is marked as the size of the page, but it continues to bring me everything.

I'm a bit confused array.sliceso here's an example of what I've done.

const arr = Array.from( Array( 100 ).keys() );
let currentPage = 0;


const pageSize = Number( document.getElementById('pagesize').value ) || 10;

const change = ( num ) => {
  
  currentPage += num;
  if( currentPage < 0 ) {
    currentPage = 0;
    
  } else if ( currentPage > Math.ceil( ( arr.length / pageSize ) ) ) {
    currentPage = Math.ceil( ( arr.length / pageSize ) );
    
  } else {
    currentPage += num;
  }
  
  document.getElementById('result').innerHTML = arr.slice( ( pageSize * currentPage ) );
 
};
<input id="pagesize" value="10">
<button onClick="change(-1)">Menos</button>
<button onClick="change(1)">Más</button>
<div id="result"></div>

javascript

2 Answers

  1. Best Answer

    The error when using array.sliceis that you are omitting to indicate the fin.

    Solution:

    Personally, I prefer to set my currentPageequal to the number that the user should see, that is, it would not start with 0but with1

    It would also validate that currentPage * pageSizeit does not exceed the length of the array.

    Finally, we would have to calculate fromand to( from and to ) and use them in slice.

    Example:

    const arr = Array.from({length: 100}, (v, i) => i + 1);
let currentPage = 1;
const pageSize = Number(document.getElementById('pagesize').value) || 10;

const change = (num) => {

  currentPage += num;
  if (currentPage < 1) {
    currentPage = 1;
  } else if ((currentPage * pageSize) > arr.length) {
    currentPage = Math.ceil(arr.length / pageSize);
  }

  let from = (currentPage - 1) * pageSize;
  let to = from + pageSize;

  document.getElementById('result').innerHTML = arr.slice(from, to);

};
    <input id="pagesize" value="10">
<button onClick="change(-1)">Menos</button>
<button onClick="change(1)">Más</button>
<div id="result"></div>

    • 2 

  2. const arr = Array.from( Array( 100 ).keys() );
let currentPage = 0;


const pageSize = Number( document.getElementById('pagesize').value ) || 10;

const change = ( num ) => {

  currentPage += num;
  if( currentPage < 0 ) {
    currentPage = 0;
  } else if ( currentPage > Math.ceil(arr.length / pageSize) ) {
    currentPage = Math.ceil(arr.length / pageSize);
  }
  
  document.getElementById('result').innerHTML = arr.slice(pageSize * currentPage);
 
};
    <input id="pagesize" value="10">
<button onClick="change(-1)">Menos</button>
<button onClick="change(1)">Más</button>
<div id="result"></div>

    The method .slice()is identical to .substring(), that is, it extracts a string from index [start]to index [end - 1]. The parameter [end]is optional and if omitted it extracts to the end.

    In this case you would be extracting your entire string because you only indicate the first value in a few words.

    Now the reason for your error is that you add twice currentPage += numtwice, once at the beginning of the function and the other in your if conditions in the last else, the conditions make your variable meet the condition and twice add num at the end of your operation so instead of multiplying pageSize* currentPagethat should give you 10 as a result, it gives you 20 instead since currentPage at the end of the operation is worth 2.

    According to your conditionals the first if will never be executed because the value of currenPageis not less than zero at any time, currenPagenor is it greater than Math.ceil(arr.length/pageSize)because this is equal to 10 and finally there is your condition of currentPage += numin your last condition which if execute.

    • 1