Pagination In Oracle JET

Hi All,In this post I'll share how to implement pagination in Oracle JET application.
Create a JET Application sing my previous post JET Application now we'll create an ArrayTableDataSource using the JavaScript array.
will add the "idAttribute" property of the "options" parameter and create a PagingTableDataSource with the ArrayTableDataSource as parameter.
Create a JET Table which uses the PagingTableDataSource you created previously as input.
Inside the Table, create a JET PagingControl which also uses the PagingTableDataSource.
Set the "slot" attribute of the PagingControl to "bottom" and position it as a child of the Table, if desired, to align the PagingControl below the Table and Apply the binding.

To implement the same open the cstomers.js and write the code for department Array, and a function for applying bindings.

require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'ojs/ojtable', 'ojs/ojpagingcontrol', 'ojs/ojpagingtabledatasource', 'ojs/ojarraytabledatasource'],
function(oj, ko, $)
{
  function viewModel()
  {
    var self = this;

    var deptArray = [{DepartmentId: 10015, DepartmentName: 'ADFPM 1001 neverending', LocationId: 200, ManagerId: 300},
        {DepartmentId: 556, DepartmentName: 'BB', LocationId: 200, ManagerId: 300},
        {DepartmentId: 10, DepartmentName: 'Administration', LocationId: 200, ManagerId: 300},
        {DepartmentId: 20, DepartmentName: 'Marketing', LocationId: 200, ManagerId: 300},
        {DepartmentId: 30, DepartmentName: 'Purchasing', LocationId: 200, ManagerId: 300},
        {DepartmentId: 40, DepartmentName: 'Human Resources1', LocationId: 200, ManagerId: 300},
        {DepartmentId: 50, DepartmentName: 'Administration2', LocationId: 200, ManagerId: 300},
        {DepartmentId: 60, DepartmentName: 'Marketing3', LocationId: 200, ManagerId: 300},
        {DepartmentId: 70, DepartmentName: 'Purchasing4', LocationId: 200, ManagerId: 300},
        {DepartmentId: 80, DepartmentName: 'Human Resources5', LocationId: 200, ManagerId: 300},
        {DepartmentId: 90, DepartmentName: 'Human Resources11', LocationId: 200, ManagerId: 300},
        {DepartmentId: 100, DepartmentName: 'Administration12', LocationId: 200, ManagerId: 300},
        {DepartmentId: 110, DepartmentName: 'Marketing13', LocationId: 200, ManagerId: 300},
        {DepartmentId: 120, DepartmentName: 'Purchasing14', LocationId: 200, ManagerId: 300},
        {DepartmentId: 130, DepartmentName: 'Human Resources15', LocationId: 200, ManagerId: 300},
        {DepartmentId: 1001, DepartmentName: 'ADFPM 1001 neverending', LocationId: 200, ManagerId: 300},
        {DepartmentId: 55611, DepartmentName: 'BB', LocationId: 200, ManagerId: 300},
        {DepartmentId: 1011, DepartmentName: 'Administration', LocationId: 200, ManagerId: 300},
        {DepartmentId: 2011, DepartmentName: 'Marketing', LocationId: 200, ManagerId: 300},
        {DepartmentId: 3011, DepartmentName: 'Purchasing', LocationId: 200, ManagerId: 300},
        {DepartmentId: 4011, DepartmentName: 'Human Resources1', LocationId: 200, ManagerId: 300},
        {DepartmentId: 5011, DepartmentName: 'Administration2', LocationId: 200, ManagerId: 300},
        {DepartmentId: 6011, DepartmentName: 'Marketing3', LocationId: 200, ManagerId: 300},
        {DepartmentId: 7011, DepartmentName: 'Purchasing4', LocationId: 200, ManagerId: 300},
        {DepartmentId: 8011, DepartmentName: 'Human Resources5', LocationId: 200, ManagerId: 300},
        {DepartmentId: 9011, DepartmentName: 'Human Resources11', LocationId: 200, ManagerId: 300},
        {DepartmentId: 10011, DepartmentName: 'Administration12', LocationId: 200, ManagerId: 300},
        {DepartmentId: 11011, DepartmentName: 'Marketing13', LocationId: 200, ManagerId: 300},
        {DepartmentId: 12011, DepartmentName: 'Purchasing14', LocationId: 200, ManagerId: 300},
        {DepartmentId: 13011, DepartmentName: 'Human Resources15', LocationId: 200, ManagerId: 300},
        {DepartmentId: 100111, DepartmentName: 'ADFPM 1001 neverending', LocationId: 200, ManagerId: 300},
        {DepartmentId: 55622, DepartmentName: 'BB', LocationId: 200, ManagerId: 300},
        {DepartmentId: 1022, DepartmentName: 'Administration', LocationId: 200, ManagerId: 300},
        {DepartmentId: 2022, DepartmentName: 'Marketing', LocationId: 200, ManagerId: 300},
        {DepartmentId: 3022, DepartmentName: 'Purchasing', LocationId: 200, ManagerId: 300},
        {DepartmentId: 4022, DepartmentName: 'Human Resources1', LocationId: 200, ManagerId: 300},
        {DepartmentId: 5022, DepartmentName: 'Administration2', LocationId: 200, ManagerId: 300},
        {DepartmentId: 6022, DepartmentName: 'Marketing3', LocationId: 200, ManagerId: 300},
        {DepartmentId: 7022, DepartmentName: 'Purchasing4', LocationId: 200, ManagerId: 300},
        {DepartmentId: 8022, DepartmentName: 'Human Resources5', LocationId: 200, ManagerId: 300},
        {DepartmentId: 9022, DepartmentName: 'Human Resources11', LocationId: 200, ManagerId: 300},
        {DepartmentId: 10022, DepartmentName: 'Administration12', LocationId: 200, ManagerId: 300},
        {DepartmentId: 11022, DepartmentName: 'Marketing13', LocationId: 200, ManagerId: 300},
        {DepartmentId: 12022, DepartmentName: 'Purchasing14', LocationId: 200, ManagerId: 300},
        {DepartmentId: 13022, DepartmentName: 'Human Resources15', LocationId: 200, ManagerId: 300}];
    self.pagingDatasource = new oj.PagingTableDataSource(new oj.ArrayTableDataSource(deptArray, {idAttribute: 'DepartmentId'}));
  }
  var vm = new viewModel;

  $(document).ready
  (
    function()
    {
      ko.applyBindings(vm, document.getElementById('pagingControlDemo'));
    }
  );
});

Now open customers.html and write the code for html page-

<html lang="en-us" style="height:100%;" dir="ltr">
  <head>
    <script>!function(e){function r(r){r&&r.data&&r.data.boomr_mq&&(e.BOOMR_mq=e.BOOMR_mq||[],e.BOOMR_mq.push(r.data.boomr_mq))}e.addEventListener&&e.addEventListener("message",r);var a=e.navigator;a&&"serviceWorker"in a&&a.serviceWorker.addEventListener&&a.serviceWorker.addEventListener("message",r)}(window);</script>
    <title>Paging Control - Paging Table</title>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="../css/images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="../css/images/touchicon.png">
    <meta name="apple-mobile-web-app-title" content="Oracle JET">
    <link rel="stylesheet" id="css" href="http://www.oracle.com/webfolder/technetwork/jet/css/libs/oj/v6.0.0/alta/oj-alta-min.css">
    <link rel="stylesheet" href="../css/demo.css">
    <script>
      // The "oj_whenReady" global variable enables a strategy that the busy context whenReady,
      // will implicitly add a busy state, until the application calls applicationBootstrapComplete
      // on the busy state context.
      window["oj_whenReady"] = true;
    </script>
    <script src="http://www.oracle.com/webfolder/technetwork/jet/js/libs/require/require.js"></script>
    <!-- RequireJS bootstrap file -->
    <script src="../js/main.js"></script>
    <script src="../js/demo.js"></script>
 
<script>!function(){function o(n,i){if(n&&i)for(var r in i)i.hasOwnProperty(r)&&(void 0===n[r]?n[r]=i[r]:n[r].constructor===Object&&i[r].constructor===Object?o(n[r],i[r]):n[r]=i[r])}try{var n=decodeURIComponent("");if(n.length>0&&window.JSON&&"function"==typeof window.JSON.parse){var i=JSON.parse(n);void 0!==window.BOOMR_config?o(window.BOOMR_config,i):window.BOOMR_config=i}}catch(o){window.console&&"function"==typeof window.console.error&&console.error("mPulse: Could not parse configuration",o)}}();</script>
<script>!function(e){var a="https://s.go-mpulse.net/boomerang/";if("False"=="True")e.BOOMR_config=e.BOOMR_config||{},e.BOOMR_config.PageParams=e.BOOMR_config.PageParams||{},e.BOOMR_config.PageParams.pci=!0,a="https://s2.go-mpulse.net/boomerang/";if(function(){function t(a){e.BOOMR_onload=a&&a.timeStamp||(new Date).getTime()}if(!e.BOOMR||!e.BOOMR.version&&!e.BOOMR.snippetExecuted){e.BOOMR=e.BOOMR||{},e.BOOMR.snippetExecuted=!0;var n,i,o,r=document.createElement("iframe");if(e.addEventListener)e.addEventListener("load",t,!1);else if(e.attachEvent)e.attachEvent("onload",t);r.src="javascript:void(0)",r.title="",r.role="presentation",(r.frameElement||r).style.cssText="width:0;height:0;border:0;display:none;",o=document.getElementsByTagName("script")[0],o.parentNode.insertBefore(r,o);try{i=r.contentWindow.document}catch(e){n=document.domain,r.src="javascript:var d=document.open();d.domain='"+n+"';void(0);",i=r.contentWindow.document}i.open()._l=function(){var e=this.createElement("script");if(n)this.domain=n;e.id="boomr-if-as",e.src=a+"DXNLE-YBWWY-AR74T-WMD99-77VRA",BOOMR_lstart=(new Date).getTime(),this.body.appendChild(e)},i.write("<bo"+'dy onload="document._l();">'),i.close()}}(),"".length>0)if(e&&"performance"in e&&e.performance&&"function"==typeof e.performance.setResourceTimingBufferSize)e.performance.setResourceTimingBufferSize();!function(){if(BOOMR=e.BOOMR||{},BOOMR.plugins=BOOMR.plugins||{},!BOOMR.plugins.AK){var a={i:!1,av:function(a){var t="http.initiator";if(a&&(!a[t]||"spa_hard"===a[t])){var n=""=="true"?1:0,i="",o=void 0!==e.aFeoApplied?1:0;if(BOOMR.addVar({"ak.v":15,"ak.cp":"82485","ak.ai":"165266","ak.ol":"0","ak.cr":68,"ak.ipv":4,"ak.proto":"h2","ak.rid":"dbe8699","ak.r":20691,"ak.a2":n,"ak.m":"dscx","ak.n":"essl","ak.bpcip":"27.60.43.0","ak.cport":9067,"ak.gh":"96.17.182.93","ak.quicv":"","ak.tlsv":"tls1.2","ak.0rtt":"","ak.csrc":"-","ak.acc":"","ak.feo":o}),""!==i)BOOMR.addVar("ak.ruds",i)}},rv:function(){var e=["ak.bpcip","ak.cport","ak.cr","ak.csrc","ak.gh","ak.ipv","ak.m","ak.n","ak.ol","ak.proto","ak.quicv","ak.tlsv","ak.0rtt","ak.r","ak.acc"];BOOMR.removeVar(e)}};BOOMR.plugins.AK={init:function(){if(!a.i){var e=BOOMR.subscribe;e("before_beacon",a.av,null,null),e("onbeacon",a.rv,null,null),a.i=!0}return this},is_complete:function(){return!0}}}}()}(window);</script></head>
  <body class="demo-disable-bg-image">
    <div id="sampleDemo" style="" class="demo-padding demo-container">
      <div id="componentDemoContent" style="width: 1px; min-width: 100%;">
       
        <div id="pagingControlDemo">
            <oj-table id='table' aria-label='Departments Table'
                   data='[[pagingDatasource]]'
                   columns='[{"headerText": "Department Id", "field": "DepartmentId"},
                             {"headerText": "Department Name", "field": "DepartmentName"},
                             {"headerText": "Location Id", "field": "LocationId"},
                             {"headerText": "Manager Id", "field": "ManagerId"}]'
                   style='width: 100%;'>
                <oj-paging-control id="paging" data='[[pagingDatasource]]' page-size='5' slot='bottom'>
                </oj-paging-control>
            </oj-table>
        </div>

       
      </div>
    </div>
  </body>
</html>   

I have taken page size 5, you can take as per your requirement.

Now save the env and run the application-

Cheers :)