Hi All, In this post I'll share how to use pagination using Data grid in Oracle JET.I have created a JET Application for creating JET Application follow my previous post Oracle JET Application on Addition to that project i have added code in incidents.js and incidents.html file although i have created one employeeData.json file under js/data folder.
Now open incidents.js file and write the below code-
require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout',
'ojs/ojdatagrid', 'ojs/ojcollectiondatagriddatasource', 'ojs/ojpagingcontrol', 'ojs/ojpagingdatagriddatasource'],
function(oj, ko, $)
{
function viewModel() {
var taskCollection, collection, datasource, pagingDatasource;
taskCollection = oj.Collection.extend({
url: 'js/data/employeeData.json'
});
collection = new taskCollection();
datasource = new oj.CollectionDataGridDataSource(collection, {rowHeader: 'EMPLOYEE_ID'});
this.pagingDatasource = ko.observable(new oj.PagingDataGridDataSource(datasource));
}
$(document).ready
(
function()
{
ko.applyBindings(new viewModel(),
document.getElementById('pagingControlDemo'));
}
);
});
Now open incidents.js file and write the below code-
require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout',
'ojs/ojdatagrid', 'ojs/ojcollectiondatagriddatasource', 'ojs/ojpagingcontrol', 'ojs/ojpagingdatagriddatasource'],
function(oj, ko, $)
{
function viewModel() {
var taskCollection, collection, datasource, pagingDatasource;
taskCollection = oj.Collection.extend({
url: 'js/data/employeeData.json'
});
collection = new taskCollection();
datasource = new oj.CollectionDataGridDataSource(collection, {rowHeader: 'EMPLOYEE_ID'});
this.pagingDatasource = ko.observable(new oj.PagingDataGridDataSource(datasource));
}
$(document).ready
(
function()
{
ko.applyBindings(new viewModel(),
document.getElementById('pagingControlDemo'));
}
);
});
and open incidents.html file and write the below code -
<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 Data Grid</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":57,"ak.ipv":4,"ak.proto":"h2","ak.rid":"db93f37","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-data-grid
id="datagrid"
aria-label="Data Grid with Paging Control"
data="[[pagingDatasource]]"
header.column.renderer="[[oj.KnockoutTemplateUtils.getRenderer('header_template')]]"
header.column.style="width:125px"
selection-mode.cell="single"
style="width:100%; max-width:777px; height:300px">
</oj-data-grid>
<oj-paging-control id="paging" data='[[pagingDatasource]]' page-size="10"
style="margin-top: 5px;">
</oj-paging-control>
</div>
<script type="text/html" id="header_template">
<!-- ko if: $context.key=='FIRST_NAME' -->
<span data-bind="text: 'First Name'"></span>
<!-- /ko -->
<!-- ko if: $context.key=='LAST_NAME' -->
<span data-bind="text: 'Last Name'"></span>
<!-- /ko -->
<!-- ko if: $context.key=='EMAIL' -->
<span data-bind="text: 'Email Address'"></span>
<!-- /ko -->
<!-- ko if: $context.key=='PHONE_NUMBER' -->
<span data-bind="text: 'Phone #'"></span>
<!-- /ko -->
<!-- ko if: $context.key=='HIRE_DATE' -->
<span data-bind="text: 'Date Hired'"></span>
<!-- /ko -->
<!-- ko if: $context.key=='SALARY' -->
<span data-bind="text: 'Salary'"></span>
<!-- /ko -->
<!-- ko if: $context.key=='DEPARTMENT_ID' -->
<span data-bind="text: 'Department Id'"></span>
<!-- /ko -->
</script>
</div>
</div>
</body>
</html>
here below points are important -
- oj-data-grid element
- oj-paging-control element
- require ojdatagrid and create a PagingDataGridDataSource from a CollectionDataGridDataSource with fetch size equal to page size.
Now run the application and click on Incidents -
Cheers guys :)
No comments:
Post a Comment