Handsontable example

by handsoncode

HTML

<script src="https://docs.handsontable.com/pro/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link rel="stylesheet" href="https://docs.handsontable.com/pro/bower_components/handsontable-pro/dist/handsontable.full.min.css">
<div id="example1"></div>
<div class="pages"></div>

CSS

#example1 {
  border: 2px solid #333;
  background: #FFF;
}
.pages {
  margin-top: 15px;
  float: right;
}

.myBt {
  background: #5C6BC0;
  color: #FFF;
  width: 30px;
  font: 0.8em Helvetica;
  border: 2px solid #3F51B5;
  border-radius: 2px;
  margin: 1px;
  padding: 5px;
  text-align: center;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {

  var
    container = document.getElementById('example1'),
    hot;

  hot = new Handsontable(container, {
    data: Handsontable.helper.createSpreadsheetData(137, 5),
    stretchH: 'all',
    colHeaders: true,
    dropdownMenu: true,
    filters: true,
    height: 270
  });
  
  var rowsOnSinglePage = 15;
  var pages = document.querySelector('.pages');
  
  var afterFilterSet = hot.getData();
  hot.updateSettings({
  	afterFilter: function(){
    	afterFilterSet = hot.getData();
      pages.innerHTML = '';
      createPages(rowsOnSinglePage);
       hot.updateSettings({
        hiddenRows: {
          rows: getArray(1),
          indicators: false
        }
      })
    }
  });

  function createPages(rowsOnSinglePage) {
    var bt, els = Math.ceil(afterFilterSet.length / rowsOnSinglePage);

    for (var i = 0; i < els; i++) {
      bt = document.createElement('BUTTON');
      bt.className = 'myBt';
      bt.innerHTML = i + 1;
      pages.appendChild(bt);
    }
  };
  
  createPages(rowsOnSinglePage); //we define how many rows should be on a single page

  pages.addEventListener('click', function(e) {
    var clicked = e.target.innerHTML;
    if (e.taget !== pages) {
      hot.updateSettings({
        hiddenRows: {
          rows: getArray(clicked),
          indicators: false
        }
      })
    }
  });

  function getArray(clicked) {
    var parts = pages.childElementCount;
    var arr = [];
 
    if (clicked === 1) {
      for (var i = (clicked * rowsOnSinglePage); i < afterFilterSet.length; i++) {
        arr.push(i);
      }
      return arr;
    } else {
      for (var j = 0; j < (clicked * rowsOnSinglePage) - rowsOnSinglePage; j++) {
        arr.push(j);
      }
      for (var i = (clicked * rowsOnSinglePage); i < afterFilterSet.length; i++) {
        arr.push(i);
      }
      return arr;
    }
  }

  hot.updateSettings({
    hiddenRows: {
      rows: getArray(1),
      indicators: false
   ...