File
Login or Register via GitHub
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <meta content="IE=edge" http-equiv="X-UA-Compatible" /> <meta content="width=device-width, initial-scale=1" name="viewport" /> <meta content="xcVDEo_LVdbqw3framOP5RO7R5TP5st4vzjjjWOOSFg" name="google-site-verification" /> <title>Employee Directory - Hashmap</title> <!-- Google tag (gtag.js) --> <!-- End Google Tag Manager --> <link href="/favicon.png" rel="icon" type="image/png" /> <meta content="Wed, 11 Dec 2024 15:33:18 -0500" name="date" /> <meta content="noindex, nofollow" name="robots" /> <link href="https://cdn.datatables.net/2.1.8/css/dataTables.dataTables.min.css" rel="stylesheet" /> <link href="//cdn.datatables.net/plug-ins/2.0.8/features/alphabetSearch/dataTables.alphabetSearch.css" rel="stylesheet" type="text/css" /> <link href="https://cdn.datatables.net/responsive/3.0.3/css/responsive.dataTables.min.css" /> <!-- JQuery, 'cuz some scripts in the page require that it be loaded now! --> <!-- <script src="https://code.jquery.com/jquery.js"></script> --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="https://cdn.datatables.net/2.1.8/js/dataTables.min.js"></script> <script src="https://cdn.datatables.net/plug-ins/2.0.8/features/alphabetSearch/dataTables.alphabetSearch.js"></script> <script src="https://cdn.datatables.net/responsive/3.0.3/js/dataTables.responsive.min.js"></script> <script src="https://cdn.datatables.net/responsive/3.0.3/js/responsive.dataTables.js"></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--></head><body> <a class="sr-only sr-only-focusable" href="#skip-main-menu">Skip main menu to main content</a> <!-- Google tag (gtag.js) --> <!-- Main Menu --> <section xmlns:xs="http://www.w3.org/2001/XMLSchema"> </section> <div class="container" id="container-outer"><!-- Header --> <!-- ===== Header<div class="container" id="container-header"> <div class="row OldGreenBar"><div class="col-sm-12 FontSizeSmaller"></div></div></div> --> <!-- Main content area --> <div class="container" id="skip-main-menu" name="main-content" tabindex="-1"><!-- Breadcrumb nav. --> <span class="breadcrumb-nav"><a href="../index.html">Home</a> » </span> <!-- Critical messages --> <div class="row"> <div class="col-md-12" style="min-height: 0px; margin:0;"> <div class="reload" id="criticalMessages"></div> </div> </div> <!-- Optional; used for header graphics --> <!-- Main Content --> <div class="row"><!-- Left Column --> <script language="Javascript" type="text/javascript" xmlns:xs="http://www.w3.org/2001/XMLSchema">< !- { document.write('<div style=\"display: none;\">'); } -></script> <script language="Javascript" type="text/javascript" xmlns:xs="http://www.w3.org/2001/XMLSchema">< !- { document.write('</div>'); } -></script> <!-- End Left Column --> <!-- Search/Center Column --> <script language="Javascript" type="text/javascript">< !- { document.write('<div class=\"col-sm-12 col-md-12 eq-col-ht\" id=\"cols-1-center\">'); } -></script> <h1>Employee Directory - Hashmap</h1><Content-Top> <p>Welcome to the Employee Directory!</p> <p> </p> </Content-Top><Content-Bottom /> <script> </script> <table class="display" id="directory-table"> <thead> <tr> <th></th> <th></th> <th>First Name</th> <th>Last Name</th> <th>Title</th> <th>Email</th> <th>Phone</th> <th>Department</th> <th>Location</th> <th></th> </tr> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th>Department</th> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td class="dtr-control"></td> <td></td> <td>John</td> <td>Doe</td> <td>Program Coordinator</td> <td>john.doe@email.com</td> <td>+1 (234) 567-8910</td> <td>Program Services</td> <td>Central</td> <td>Staff</td> </tr> <tr> <td class="dtr-control"></td> <td></td> <td>John</td> <td>Doe</td> <td>Program Coordinator</td> <td>john.doe@email.com</td> <td>+1 (234) 567-8910</td> <td>Program Services</td> <td>Central</td> <td>Staff</td> </tr> <tr> <td class="dtr-control"></td> <td></td> <td>John</td> <td>Doe</td> <td>Program Coordinator</td> <td>john.doe@email.com</td> <td>+1 (234) 567-8910</td> <td>Program Services</td> <td>Central</td> <td>Staff</td> </tr> <tr> <td class="dtr-control"></td> <td></td> <td>John</td> <td>Doe</td> <td>Program Coordinator</td> <td>john.doe@email.com</td> <td>+1 (234) 567-8910</td> <td>Program Services</td> <td>Central</td> <td>Staff</td> </tr> <tr> <td class="dtr-control"></td> <td></td> <td>John</td> <td>Doe4</td> <td>Program Coordinator</td> <td>john.doe@email.com</td> <td>+1 (234) 567-8910</td> <td>Program Services</td> <td>Central</td> <td>Staff</td> </tr> <tr> <td class="dtr-control"></td> <td></td> <td>John</td> <td>Doe2</td> <td>Program Coordinator</td> <td>john.doe@email.com</td> <td>+1 (234) 567-8910</td> <td>Program Services</td> <td>Central</td> <td>Staff</td> </tr> <tr> <td class="dtr-control"></td> <td></td> <td>John</td> <td>Doe3</td> <td>Program Coordinator</td> <td>john.doe@email.com</td> <td>+1 (234) 567-8910</td> <td>Program Services</td> <td>Central</td> <td>Staff</td> </tr> </tbody> <tfoot> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> </tfoot> </table> <script>console.log("document is loaded 1"); $(document).ready(function () { var table = $('#directory-table').DataTable({ //modify layout of table layout: { top1: 'alphabetSearch', topStart: { pageLength: { menu: [10, 25, 50, 100] } } }, // set alphabet search to last name (column 2) alphabet: { column: 2 }, //change search bar wording language: { search: 'Search all columns: ' }, //add responsiveness to table responsive: { details: true }, //change default order to last name order: [[2, 'asc']], //set column specific parameters columnDefs: [ //turn off sorting by photo column { orderable: false, targets: 0 }, //hide the employee type column but make it searchable { targets: -1, visible: false, searchable: true } ], orderCellsTop: true, //draw dropdown for department field in department column initComplete: function () { this.api().columns([6]).every(function () { var column = this; var select = $('<select><option value=""/></select>') .appendTo($("#directory-table thead tr:eq(1) th").eq(column.index()).empty()) .on('change', function () { var val = $.fn.dataTable.util.escapeRegex( $(this).val() ); column .search(val ? '^' + val + '$' : '', true, false) .draw(); }); column.data().unique().sort().each(function (d, j) { select.append('<option value="' + d + '">' + d + '</option>'); }); }); } //end initComplete function }); //end datatables table function }); //end document ready function </script> </div> <!-- End Search/Center Column --> <!-- Right Column --> <!--<system-region name="DEFAULT-Right"/> <system-region name="DEFAULT-Right-XHTMLBlock"/> <system-region name="DEFAULT-Right-ClosingDIV"/></div>--> <!-- End Right Column --> <div class="row NoPrint" id="LastUpdateContainer" xmlns:xalan="http://xml.apache.org/xalan"> <div class="col-sm-12"> </div> </div> <!-- End Main Content --> <!-- Footer --> <!-- ===== Site footer --> <section> <footer> </footer> </section> <!-- End Footer --> </div> </div> <!-- Javascript --> <!-- Bootstrap core --> <script crossorigin="anonymous" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- Equal Height Cols --> <script src="../files/javascript/jquery.equal-height-columns.js"></script> <script type="text/javascript"> $('.eq-col-ht').equalHeightColumns({ afterloading: 'eq-col-ht' }); </script> <!-- Critical Messages --> <script> </script> </div></body></html>body { font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; color: #333; background-color: #fff;}// var table = new DataTable('#example', {// responsive: true// });
300px
You can jump to the latest bin by adding /latest to your URL
| Shortcut | Action |
|---|---|
| ctrl + [num] | Toggle nth panel |
| ctrl + 0 | Close focused panel |
| ctrl + enter | Re-render output. If console visible: run JS in console |
| Ctrl + l | Clear the console |
| ctrl + / | Toggle comment on selected lines |
| ctrl + [ | Indents selected lines |
| ctrl + ] | Unindents selected lines |
| tab | Code complete & Emmet expand |
| ctrl + s | Save & lock current Bin from further changes |
| ctrl + shift + s | Clone Bin |
| ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts | |
| URL | Action |
|---|---|
| / | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
| /edit | Edit the current bin |
| /watch | Follow a Code Casting session |
| /embed | Create an embeddable version of the bin |
| /latest | Load the very latest bin (/latest goes in place of the revision) |
| /[username]/last | View the last edited bin for this user |
| /[username]/last/edit | Edit the last edited bin for this user |
| /[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
| /quiet | Remove analytics and edit button from rendered output |
| .js | Load only the JavaScript for a bin |
| .css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. | |