• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8.   <style>
    9.     .zg-body {
    10.       background: #e6e6e6;
    11.     }
    12.  
    13.     .zg-body .pager--container {
    14.       display: flex;
    15.       justify-content: flex-start;
    16.       padding: 1rem;
    17.     }
    18.  
    19.     .zg-body .pager--container button {
    20.       margin: 3px;
    21.       height: fit-content;
    22.     }
    23.  
    24.     zing-grid[loading] {
    25.       height: 284px;
    26.     }
    27.   </style>
    28. </head>
    29.  
    30. <body class="zg-body">
    31.   <div class="inner--container">
    32.     <div class="pager--container">
    33.       <button onClick="pager('first');">First Page</button>
    34.       <button onClick="pager('prev');">Prev Page</button>
    35.       <button onClick="pager('next');">Next Page</button>
    36.       <button onClick="pager('last');">Last Page</button>
    37.     </div>
    38.     <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>
    39.     </zing-grid>
    40.   </div>
    41.   <script>
    42.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // function declaration
    43.     function pager(type) {
    44.       const zgRef = document.querySelector('zing-grid');
    45.       switch (type) {
    46.         case 'prev':
    47.           zgRef.prevPage();
    48.           break;
    49.         case 'next':
    50.           zgRef.nextPage();
    51.           break;
    52.         case 'last':
    53.           zgRef.lastPage();
    54.           break;
    55.         default:
    56.           zgRef.firstPage();
    57.       }
    58.     }
    59.   </script>
    60. </body>
    61.  
    62. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body class="zg-body">
    11.   <div class="inner--container">
    12.     <div class="pager--container">
    13.       <button onClick="pager('first');">First Page</button>
    14.       <button onClick="pager('prev');">Prev Page</button>
    15.       <button onClick="pager('next');">Next Page</button>
    16.       <button onClick="pager('last');">Last Page</button>
    17.     </div>
    18.     <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>
    19.     </zing-grid>
    20.   </div>
    21. </body>
    22.  
    23. </html>
    1. .zg-body {
    2.   background: #e6e6e6;
    3. }
    4.  
    5. .zg-body .pager--container {
    6.   display: flex;
    7.   justify-content: flex-start;
    8.   padding: 1rem;
    9. }
    10.  
    11. .zg-body .pager--container button {
    12.   margin: 3px;
    13.   height: fit-content;
    14. }
    1. // function declaration
    2. function pager(type) {
    3.   const zgRef = document.querySelector('zing-grid');
    4.   switch (type) {
    5.     case 'prev':
    6.       zgRef.prevPage();
    7.       break;
    8.     case 'next':
    9.       zgRef.nextPage();
    10.       break;
    11.     case 'last':
    12.       zgRef.lastPage();
    13.       break;
    14.     default:
    15.       zgRef.firstPage();
    16.   }
    17. }