Default Pager

42 of 125

To create a pager that will appear at the bottom of the grid, you can either add the <zg-pager> tag, or add the pager attribute to the <zing-grid> tag.

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/LSPJZE05

Result Full HTML CSS JS

Edit Download

Full Code

<!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;
    }

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

<body class="zg-body">
  <zing-grid pager page-size="5" page-size-options="2,5,20" caption="Movies" src="https://zinggrid-examples.firebaseio.com/movies/" layout="row" layout-controls="disabled" viewport-stop>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
  </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">
    <zing-grid 
      pager 
      page-size="5"
      page-size-options="2,5,20"
      caption="Movies" 
      src="https://zinggrid-examples.firebaseio.com/movies/"
      layout="row"
      layout-controls="disabled"
      viewport-stop>
    </zing-grid>
	</body>
</html>

.zg-body {background:#e6e6e6;}

// No JS code

Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio

Default Pager

Full Code

Related Docs

Related Docs

Demo Gallery