Demos Back to Docs

Cursor Pagination

65 of 124
If your API supports cursor based pagination, so do we! Cursor based pagination is great for CRUD grids or live feeds where the current page of data you are showing can be changing often.
Result Full HTML CSS JS
Edit Download

Full Code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid: REST API</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
  <style>
    .zg-body zing-grid[loading] {
      min-height: 600px;
    }

    /* hide some inner grid elements */
    .zg-body zing-grid[loading] zg-pager {
      visibility: hidden;
    }

    .zg-body zg-pager zg-select {
      display: none;
    }

    .zg-body zg-load-mask {
      /* set the color to match the gif */
      opacity: .90;
      top: 65px;
      height: calc(100% - 65px);
      /* custom gif for loading */
      background-image: url('https://storage.googleapis.com/zg-demos.appspot.com/starwars_loading.gif');
      /* Center and scale the image nicely */
      background-position: center;
      background-repeat: repeat;
      background-size: contain;
    }

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

<body class="zg-body">
  <zing-grid caption="Cursor Based Pagination" pager page-size="4" search>
    <zg-data src="https://us-central1-zingsoft-demo-endpoints.cloudfunctions.net/cursor-paging/api">
      <!-- where to retrieve data from -->
      <zg-param name="recordPath" value="data"></zg-param>
      <!-- enable server paging -->
      <zg-param name="loadByPage" value="true"></zg-param>
      <!-- enable cursor server paging -->
      <zg-param name="cursor" value="true"></zg-param>
      <!-- return value from cursor endpoint for previous page -->
      <zg-param name="prevIDPath" value="previous_cursor"></zg-param>
      <!-- return value from cursor endpoint for next page -->
      <zg-param name="nextIDPath" value="next_cursor"></zg-param>
      <!-- query param to send back for next/prev cursors -->
      <zg-param name="prevIDKey" value="cursor"></zg-param>
      <!-- query param to send back for next/prev cursors -->
      <zg-param name="nextIDKey" value="cursor"></zg-param>
    </zg-data>
    <zg-colgroup>
      <zg-column index="Date"></zg-column>
      <zg-column index="Close"></zg-column>
    </zg-colgroup>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
  </script>
</body>

</html>
<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
    <title>ZingGrid: REST API</title>
		<script src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>	</head>
	<body class="zg-body">
    <zing-grid 
      caption="Cursor Based Pagination" 
      pager
      page-size="4"
      search
    >
      <zg-data src="https://us-central1-zingsoft-demo-endpoints.cloudfunctions.net/cursor-paging/api">
        <!-- where to retrieve data from -->
        <zg-param name="recordPath" value="data"></zg-param>
        <!-- enable server paging -->
        <zg-param name="loadByPage" value="true"></zg-param>
        <!-- enable cursor server paging -->
        <zg-param name="cursor" value="true"></zg-param>
        <!-- return value from cursor endpoint for previous page -->
        <zg-param name="prevIDPath" value="previous_cursor"></zg-param>
        <!-- return value from cursor endpoint for next page -->
        <zg-param name="nextIDPath" value="next_cursor"></zg-param>
        <!-- query param to send back for next/prev cursors -->
        <zg-param name="prevIDKey" value="cursor"></zg-param>
        <!-- query param to send back for next/prev cursors -->
        <zg-param name="nextIDKey" value="cursor"></zg-param>
      </zg-data>
      <zg-colgroup>
        <zg-column index="Date"></zg-column>
        <zg-column index="Close"></zg-column>
      </zg-colgroup>
    </zing-grid>
	</body>
</html>
.zg-body zing-grid[loading]{
  min-height: 600px;
}
 
/* hide some inner grid elements */
.zg-body zing-grid[loading]  zg-pager {
  visibility: hidden;
}
 
.zg-body zg-pager zg-select { display:none; }

.zg-body zg-load-mask {
  /* set the color to match the gif */
  opacity: .90;
  top: 65px;
  height: calc(100% - 65px);
  /* custom gif for loading */
  background-image: url('https://storage.googleapis.com/zg-demos.appspot.com/starwars_loading.gif');
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: repeat;
  background-size: contain;
}
// 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