Demos Back to Docs

Pagination - Custom Positioning

116 of 124
You can use our <zg-pager> web component to place the pager controls wherever you want inside the grid. This flexibility allows you to move and style the controls however you want.
Result Full HTML CSS JS
Edit Download
Showing - of rows
Showing items
Showing - of pages

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 zing-grid[loading] {
      height: 400px;
    }

    .zg-body zg-pager {
      font-size: var(--zg-pager-font-size, 1.25rem);
    }

    .zg-body zg-pager[position="top"] {
      border-bottom: 1px solid #c0c0c0;
    }

    .zg-body zg-pager[position="bottom"] {
      border-top: 1px solid #c0c0c0;
    }

    .zg-body zg-pager zg-icon {
      font-size: 1.25rem;
    }

    @media (max-width: 600px) {
      .zg-body zg-pager {
        font-size: 0.9rem;
      }
    }

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

<body class="zg-body">
  <zing-grid page-size="3" page-size-card="2" src="https://zinggrid-examples.firebaseio.com/movies/" layout="row" layout-controls="disabled" viewport-stop>
    <zg-pager position="top">
      <div slot="left">
        <span>Showing</span>
        <zg-text value="startrow"></zg-text>
        <span>-</span>
        <zg-text value="endrow"></zg-text>
        <span>of</span>
        <zg-text value="rowcount"></zg-text>
        <span>rows</span>
      </div>
      <div slot="right">
        <span>Showing</span>
        <zg-select action="pagesize" options="3, 6, 9"></zg-select>
        <span>items</span>
      </div>
    </zg-pager>

    <zg-pager position="bottom">
      <div slot="left">
        <span>Showing</span>
        <zg-text value="currpage"></zg-text>
        <span>-</span>
        <zg-text value="pagecount"></zg-text>
        <span>of</span>
        <zg-text value="pagecount"></zg-text>
        <span>pages</span>
      </div>
      <div slot="right">
        <zg-button action="prevpage"></zg-button>
        <zg-text value="currpage"></zg-text>
        <zg-button action="nextpage"></zg-button>
      </div>
    </zg-pager>
  </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
		  page-size="3"
    	page-size-card="2"
		  src="https://zinggrid-examples.firebaseio.com/movies/"
      layout="row"
      layout-controls="disabled"
      viewport-stop>
		  <zg-pager position="top">
        <div slot="left">
          <span>Showing</span>
          <zg-text value="startrow"></zg-text>
          <span>-</span>
          <zg-text value="endrow"></zg-text>
          <span>of</span>
          <zg-text value="rowcount"></zg-text>
          <span>rows</span>
        </div>
        <div slot="right">
          <span>Showing</span>
          <zg-select action="pagesize" options="3, 6, 9"></zg-select>
          <span>items</span>
        </div>
		  </zg-pager>

		  <zg-pager position="bottom">
		    <div slot="left">
 		      <span>Showing</span>
 		      <zg-text value="currpage"></zg-text>
 		      <span>-</span>
 		      <zg-text value="pagecount"></zg-text>
 		      <span>of</span>
 		      <zg-text value="pagecount"></zg-text>
 		      <span>pages</span>
		    </div>
        <div slot="right">
          <zg-button action="prevpage"></zg-button>
          <zg-text value="currpage"></zg-text>
          <zg-button action="nextpage"></zg-button>
        </div>
		  </zg-pager>
		</zing-grid>
	</body>
</html>
.zg-body zing-grid[loading] {
  height: 400px;
}

.zg-body zg-pager {
  font-size: var(--zg-pager-font-size,1.25rem);
}

.zg-body zg-pager[position="top"] {
  border-bottom: 1px solid #c0c0c0; 
}

.zg-body zg-pager[position="bottom"] {
  border-top: 1px solid #c0c0c0; 
}

.zg-body zg-pager zg-icon {
  font-size: 1.25rem;
}

@media (max-width: 600px) {
  .zg-body zg-pager {
    font-size: 0.9rem;
  }
}
// No JS code

Related Docs

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

Related Docs

Demo Gallery