1 Reply Latest reply on Nov 6, 2019 12:28 PM by 3893507

    Rowindex Providing wrong value in Pagination

    3893507

      HTML CODE:

      ----------------------

       

        <html lang="en-us" style="height:100%;" dir="ltr">

          <head>

            <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/v7.2.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(r){window.console&&"function"==typeof window.console.error&&console.error("mPulse: Could not parse configuration",r)}}();</script>

          <script>!function(e){var a="https://s.go-mpulse.net/boomerang/",t="addEventListener";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(window.BOOMR_API_key="DXNLE-YBWWY-AR74T-WMD99-77VRA",function(){function n(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 i,o,r,_=document.createElement("iframe");if(e[t])e[t]("load",n,!1);else if(e.attachEvent)e.attachEvent("onload",n);_.src="javascript:void(0)",_.title="",_.role="presentation",(_.frameElement||_).style.cssText="width:0;height:0;border:0;display:none;",r=document.getElementsByTagName("script")[0],r.parentNode.insertBefore(_,r);try{o=_.contentWindow.document}catch(O){i=document.domain,_.src="javascript:var d=document.open();d.domain='"+i+"';void(0);",o=_.contentWindow.document}o.open()._l=function(){var e=this.createElement("script");if(i)this.domain=i;e.id="boomr-if-as",e.src=a+"DXNLE-YBWWY-AR74T-WMD99-77VRA",BOOMR_lstart=(new Date).getTime(),this.body.appendChild(e)},o.write("<bo"+'dy onload="document._l();">'),o.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=""=="true"?1:0,t="",n="wzgk4qyxz6gxixn3wlqq-f-6da785070-clientnsv4-s.akamaihd.net",i={"ak.v":25,"ak.cp":"82485","ak.ai":parseInt("165266",10),"ak.ol":"0","ak.cr":1,"ak.ipv":4,"ak.proto":"h2","ak.rid":"f609a06","ak.r":20716,"ak.a2":a,"ak.m":"dscx","ak.n":"essl","ak.bpcip":"182.76.174.0","ak.cport":49755,"ak.gh":"23.205.118.72","ak.quicv":"","ak.tlsv":"tls1.2","ak.0rtt":"","ak.csrc":"-","ak.acc":"","ak.t":"1572582113"};if(""!==t)i["ak.ruds"]=t;var o={i:!1,av:function(a){var t="http.initiator";if(a&&(!a[t]||"spa_hard"===a[t]))i["ak.feo"]=void 0!==e.aFeoApplied?1:0,BOOMR.addVar(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","ak.t"];BOOMR.removeVar(e)}};BOOMR.plugins.AK={akVars:i,akDNSPreFetchDomain:n,init:function(){if(!o.i){var e=BOOMR.subscribe;e("before_beacon",o.av,null,null),e("onbeacon",o.rv,null,null),o.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="[[pagingDataProvider]]"

                              on-current-row-changed="[[currentRowListener]]"

                           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="[[pagingDataProvider]]" page-size="10" slot="bottom">

                        </oj-paging-control>

                    </oj-table>

                </div>

       

               

              </div>

            </div>

          </body>

        </html>

       

       

      JS CODE:

      ------------------

        require(['knockout','ojs/ojbootstrap','ojs/ojpagingdataproviderview', 'ojs/ojarraydataprovider', 'ojs/ojknockout', 'ojs/ojtable', 'ojs/ojpagingcontrol'],

        function(ko, Bootstrap, PagingDataProviderView, ArrayDataProvider)

        {

          function viewModel()

          {

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

               

            this.pagingDataProvider = new PagingDataProviderView(new ArrayDataProvider(deptArray, {idAttribute: 'DepartmentId'}));

          }

         

          self.currentRowListener = function (event,data)

                      {

                          var data = event.detail;

                         console.log(data);

                         

                          if (event.type == 'currentRowChanged' && data['value'] != null)

                          {

       

       

                              var rowIndex = data['value']['rowIndex'];

                            alert(rowIndex);

                          }

          }

         

          var vm = new viewModel;

       

          Bootstrap.whenDocumentReady().then(

            function()

            {

              ko.applyBindings(vm, document.getElementById('pagingControlDemo'));

            }

          );

        });

       

       

       

       

       

      Hi,

       

      I have addded current row listener to the oj-table with Pagination in it.

       

      While clicking on a row in second page it provides first page index only.

       

      Please help us to resolve.

       

      Thanks,

       

      Tamilselvan Natarajan