Demos Back to Docs

Pagination - Custom Page Size

94 of 125

You can adjust the amount of results shown on render with the page-size attribute on the <zing-grid> tag.

Please enable JavaScript to see the interactive demo.

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

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

    .zg-body zing-grid[loading] {
      height: 400px;
    }

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

<body class="zg-body">
  <zing-grid caption="Movies" pager page-size="5" page-size-options="2,5,20" page-size-card="2" layout="card" layout-controls src="https://zinggrid-examples.firebaseio.com/movies/">
  </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 
      caption="Movies" 
      pager 
      page-size="5"
      page-size-options="2,5,20"
      page-size-card="2"
      layout="card"
      layout-controls
      src="https://zinggrid-examples.firebaseio.com/movies/">
    </zing-grid>
	</body>
</html>

.zg-body {background:#e6e6e6;}

.zg-body zing-grid[loading] { height: 400px; }

// 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

Pagination - Custom Page Size

Full Code

Related Docs

Related Docs

Demo Gallery