0

I'm working on a horizontal list that displays last 12 items of array.

what I want to do is to adjust the range to be show.

ex. the array length is 50, by default it will display last 12 items (39-50). So if I click on the LEFT button, the next items will be 26-38. same with the right button.

I tried to implement the answer here, but no luck.

Hope you help me.

Thanks.

var arrResults = [40, 100, 1, 5, 25, 10, 12, 32, 41, 51, 15, 13, 11, 55, 62, 64, 75, 77, 33, 1, 5, 25, 10, 12, 32, 41, 51, 15, 13, 11, 55, 62, 64, 75, 77, 33];
var len = arrResults.length;
var lastTwelve = arrResults.slice(Math.max(arrResults.length - 12));
lastTwelve.reverse();
for (var i = 0; i < lastTwelve.length; i++) {
   $('ul').prepend('<li><p>'+ len +'</p><p>'+ lastTwelve[i] +'</p></li>');
            len--;
        }

$('.left').click(function(){
    
});
ul li{
  list-style-type: none;
  width: 30px;
  float: left;
  background-color: #DDD;
  border: 1px solid #FFF;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  
</ul>

<button class="left">LEFT</button>
<br>
<button class="left">RIGHT</button>
user123
  • 435
  • 1
  • 6
  • 23

1 Answers1

1

Something like that maybe : 

var k = 1;
displayData(k);
function displayData(k){

var arrResults = [40, 100, 1, 5, 25, 10, 12, 32, 41, 51, 15, 13, 11, 55, 62, 64, 75, 77, 33, 1, 5, 25, 10, 12, 32, 41, 51, 15, 13, 11, 55, 62, 64, 75, 77, 33];
var len = arrResults.length;
$('.ulclass').empty();
var temp=len-(k-1)*12;
for (var i =(len-(k-1)*12) ; i >(len-12*k) ; i--) {
   $('ul').prepend('<li><p>'+ temp +'</p><p>'+ arrResults[i-1] +'</p></li>');
         temp-- ;
        }
}
$('.left').click(function(){
    k = k+1;
    displayData(k);
});

$('.right').click(function(){
  k = k-1;
  displayData(k);
});
ul li{
  list-style-type: none;
  width: 30px;
  float: left;
  background-color: #DDD;
  border: 1px solid #FFF;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <ul class="ulclass">
      
    </ul>
    
    <button class="left">LEFT</button>
    <br>

    <button class="right">RIGHT</button>

Just check if you are out of bounds because i didnt implement it.

I hope to help.

Nikos Chatzivasileiadis
  • 493
  • 7
  • 21