requirejs.config({
// Path mappings for the logical module names
paths: {
'knockout': '//cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min',
'jquery': '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min',
"jqueryui": "//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui",
"jqueryui-amd": "//cdn.rawgit.com/jquery/jquery-ui/1-11-stable/ui",
"promise": "//cdn.rawgit.com/components/es6-promise/c95149ffaa2e8162601c57d4282362eac84f929b/promise.min",
"hammerjs": "//cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.min",
"ojdnd": "//cdn.rawgit.com/oracle/oraclejet/49fcbbde7c8e178a3a21625d44485536e3ad1aaf/dist/js/libs/dnd-polyfill/dnd-polyfill-1.0.0.min",
"ojs": "//cdn.rawgit.com/oracle/oraclejet/49fcbbde7c8e178a3a21625d44485536e3ad1aaf/dist/js/libs/oj/debug",
"ojL10n": "//cdn.rawgit.com/oracle/oraclejet/49fcbbde7c8e178a3a21625d44485536e3ad1aaf/dist/js/libs/oj/ojL10n",
"ojtranslations": "//cdn.rawgit.com/oracle/oraclejet/49fcbbde7c8e178a3a21625d44485536e3ad1aaf/dist/js/libs/oj/resources",
"text": "//cdnjs.cloudflare.com/ajax/libs/require-text/2.0.12/text.min",
"signals": "//cdnjs.cloudflare.com/ajax/libs/js-signals/1.0.0/js-signals.min",
// non-jet libraries
// Lazy is not necessarily necessary, but it makes for a nice polyfill
"lazy": "//cdnjs.cloudflare.com/ajax/libs/lazy.js/0.4.2/lazy.min"
},
// Shim configurations for modules that do not expose AMD
shim: {
'jqueryui-amd': {
exports: "$",
deps: ['jquery']
},
'jquery': {
exports: ['jQuery', '$']
}
},
config: {
ojL10n: {
merge: {
//'ojtranslations/nls/ojtranslations': 'resources/nls/menu'
// The following addes en-US to the r.js bundle
//'ojtranslations/nls/ojtranslations': '../../oj/resources/nls/en-US/localeElements'
}
}
}
});
require(['knockout',
'lazy',
'ojs/ojcore',
'ojs/ojknockout',
'ojs/ojinputtext',
'ojs/ojtable',
'ojs/ojarraytabledatasource',
'promise'
], function(ko, lazy, oj) {
'use strict';
// hard coded data -- normally loaded via ajax
var employees = [
{id: 101, name: "Beauregard Duke"},
{id: 102, name: "Lucas Duke"},
{id: 103, name: "Daisy Duke"},
{id: 201, name: "Cooter Davenport"},
{id: 301, name: "Jefferson Davis Hogg"},
{id: 302, name: "Lulu Coltrane Hogg"},
{id: 401, name: "Rosco P Coltrane"}
];
var ViewModel = function() {
var self = this;
self.datasource = new oj.ArrayTableDataSource(
employees, {
idAttribute: 'id'
});
self.nameSearch = ko.observable();
/*self.nameSearch.extend({
rateLimit: {
timeout: 250,
method: "notifyWhenChangesStop"
}
});*/
self.nameSearch.subscribe(function(newValue) {
self.datasource.reset(
filteredEmployees(newValue)
);
});
var filteredEmployees = function(search) {
if (!search) {
// no filter criteria so return all employees
return employees;
}
var findByName = function(empl) {
return lazy(empl.name)
.contains(search);
};
var result = lazy(employees)
.filter(findByName)
.value();
return result;
};
};
ko.applyBindings(new ViewModel());
});
<div class="content-container">
<div class="inline-form">
<label for="search">Search</label>
<input id="search" name="search" data-bind="ojComponent: {
component: 'ojInputText', rawValue: nameSearch}"
placeholder="Search by name"/>
</div>
<table id="table" summary="Department List" aria-label="Departments Table"
data-bind="ojComponent: {component: 'ojTable',
data: datasource,
columnsDefault: {sortable: 'none'},
columns: [{headerText: 'Employee Id',
field: 'id'},
{headerText: 'Employee Name',
field: 'name'}]}">
</table>
</div>
@import url('//cdn.rawgit.com/oracle/oraclejet/49fcbbde7c8e178a3a21625d44485536e3ad1aaf/dist/css/alta/oj-alta.css');
.content-container {
margin: 10px;
}
.inline-form {
display: flex;
align-items: center;
}
.inline-form > .oj-label {
margin-right: 1em;
}