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", // 2.0.1: 49fcbbde7c8e178a3a21625d44485536e3ad1aaf "ojdnd": "//cdn.rawgit.com/oracle/oraclejet/2.0.1/dist/js/libs/dnd-polyfill/dnd-polyfill-1.0.0.min", "ojs": "//cdn.rawgit.com/oracle/oraclejet/2.0.1/dist/js/libs/oj/debug", "ojL10n": "//cdn.rawgit.com/oracle/oraclejet/2.0.1/dist/js/libs/oj/ojL10n", "ojtranslations": "//cdn.rawgit.com/oracle/oraclejet/2.0.1/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(); ko.pureComputed(self.nameSearch) .extend({ rateLimit: { timeout: 250, method: "notifyWhenChangesStop" } }) .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/2.0.1/dist/css/alta/oj-alta.css'); .content-container { margin: 10px; } .inline-form { display: flex; align-items: center; } .inline-form > .oj-label { margin-right: 1em; }