JSFiddle - React, Tailwind, and code Playground

by dpnminh

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.7.0/lodash.min.js"></script>
<input type="number" placeholder="Enter a number" id="number-input">
<button onclick="pagination()">
pagination
</button>
<div id="number-display" data-content="-1">

</div>

JavaScript

var shuffle = function (str) {
    return str.split('').sort(function () {
      return 0.5 - Math.random();
    }).join('');
  };
  
function randomArr(){
  	var arr = _.map(_.range(1, 10), function (i) {
          return {
            id  : i,
            text: shuffle('te ststr ing to shuffle') + ' ' + i,
            children: randomChildren(Math.floor((Math.random() * 10) + 1))
          };
        });
      return arr;
}

function randomChildren(size){
console.log(size)
	return _.range(1, size);
}

var arr = randomArr();

function pagination(){
  var number = parseInt(document.getElementById('number-input').value);  
  console.log(arr);
  
  var size = 10;
  
  var end = number * size, start = end - size, count = start, length = 0;
  console.log('start:', start);
  console.log('end:', end);
  
  var result = [];
  var stop = false;
  
  for (var i = 0; i < arr.length; i++){
  	var item = arr[i];
    var newLength = item.children.length + length;
    
    console.log('newLength:', newLength);
    
    if(newLength > start){
    		var sindex = Math.abs(start - length);
        var eindex = item.children.length;
        
        if (newLength >= end){
        		eindex = Math.abs(end - length);
            stop = true;
        }
        
        start = newLength;
        
        console.log('['+ sindex + ", " + eindex + "]");
        
        result.push({
        	text: item.text,
          children: item.children.slice(sindex, eindex)
        });
        
        if (stop){
        break;
        }
    }
    
    length = newLength;
  }
  
  result.toString = function(){
  		var str = "";
      
      for(var i= 0; i < result.length; i++){
      		var item = result[i];
          
          str += "{&nbsp;text: " + item.text + ", &nbsp;children: " +  item.children.toString() +"&nbsp;},&nbsp;"
      }
      
      return str
  }
  
  document.getElementById('number-display').innerHTML = result.toString();  
}