Pagination by External Inputs

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-body {
      background: #e6e6e6;
    }

    .zg-body .pager--container {
      display: flex;
      justify-content: flex-start;
      padding: 1rem;
    }

    .zg-body .pager--container button {
      margin: 3px;
      height: fit-content;
    }

    zing-grid[loading] {
      height: 284px;
    }
  </style>
</head>

<body class="zg-body">
  <div class="inner--container">
    <div class="pager--container">
      <button onClick="pager('first');">First Page</button>
      <button onClick="pager('prev');">Prev Page</button>
      <button onClick="pager('next');">Next Page</button>
      <button onClick="pager('last');">Last Page</button>
    </div>
    <zing-grid caption="Movies" pager page-size="2" page-size-options="2,5,15" src="https://zinggrid-examples.firebaseio.com/movies/" layout="row" layout-controls="disabled" viewport-stop>
    </zing-grid>
  </div>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // function declaration
    function pager(type) {
      const zgRef = document.querySelector('zing-grid');
      switch (type) {
        case 'prev':
          zgRef.prevPage();
          break;
        case 'next':
          zgRef.nextPage();
          break;
        case 'last':
          zgRef.lastPage();
          break;
        default:
          zgRef.firstPage();
      }
    }
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
</head>

<body class="zg-body">
  <div class="inner--container">
    <div class="pager--container">
      <button onClick="pager('first');">First Page</button>
      <button onClick="pager('prev');">Prev Page</button>
      <button onClick="pager('next');">Next Page</button>
      <button onClick="pager('last');">Last Page</button>
    </div>
    <zing-grid caption="Movies" pager page-size="2" page-size-options="2,5,15" src="https://zinggrid-examples.firebaseio.com/movies/" layout="row" layout-controls="disabled" viewport-stop>
    </zing-grid>
  </div>
</body>

</html>

.zg-body {
  background: #e6e6e6;
}

.zg-body .pager--container {
  display: flex;
  justify-content: flex-start;
  padding: 1rem;
}

.zg-body .pager--container button {
  margin: 3px;
  height: fit-content;
}

// function declaration
function pager(type) {
  const zgRef = document.querySelector('zing-grid');
  switch (type) {
    case 'prev':
      zgRef.prevPage();
      break;
    case 'next':
      zgRef.nextPage();
      break;
    case 'last':
      zgRef.lastPage();
      break;
    default:
      zgRef.firstPage();
  }
}