Handsontable example

by handsoncode

HTML

<div id="example1" class="hot handsontable htColumnHeaders"></div>
<div class="pagination">
  <a href="#1">1</a>
  <a href="#2">2</a>
  <a href="#3">3</a>
  <a href="#4">4</a>
  <a href="#5">5</a>
  <a href="#6">6</a>
</div>
<p>Dataset after back-end filtering is always your new source data which you can part for as many pages as you like.</p>

CSS

</style><!-- Ugly Hack due to jsFiddle issue --> <script src="https://docs.handsontable.com/pro/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/bower_components/handsontable-pro/dist/handsontable.full.min.css"><style> a {
  padding: 0.5em;
  border: 2px solid #7e6e88;
  color: black;
  background: #fff;

JavaScript

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

  var getData = (function() {
    var data = [
      [1, 2, 4, 5, 6, 7, 8, 9, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
      [1, 2, 4, 5, 6, 7, 8, 9, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0],
      [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0],
      [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [1, 2, 4, 5, 6, 7, 8, 9, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
      [1, 2, 4, 5, 6, 7, 8, 9, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0],
      [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0],
      [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [1, 2, 4, 5, 6, 7, 8, 9, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
      [1, 2, 4, 5, 6, 7, 8, 9, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0],
      [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0],
      [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [1, 2, 4, 5, 6, 7, 8, 9, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
      [1, 2, 4, 5, 6, 7, 8, 9, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0],
      [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0],
      [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    ];

    return function() {
      var page = parseInt(window.location.hash.replace('#', ''), 10) || 1,
       ...