Azaki
/
Plugins
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adding search pane plug-in. Completely unfinished, but its a start!

Browse Source
pull/345/head 1.10.16
Allan Jardine 7 years ago
parent 2eec261258
commit 46e6749a06
7 changed files with 912 additions and 2 deletions
Show Stats Download Patch File Download Diff File

4
features/searchHighlight/dataTables.searchHighlight.min.js vendored
Unescape View File

@ -2,5 +2,5 @@
SearchHighlight for DataTables v1.0.1
2014 SpryMedia Ltd - datatables.net/license
*/
(function(h,g,b){function e(d,c){d.unhighlight();c.rows({filter:"applied"}).data().length&&d.highlight(b.trim(c.search()).split(/\s+/))}b(g).on("init.dt.dth",function(d,c){if("dt"===d.namespace){var a=new b.fn.dataTable.Api(c),f=b(a.table().body());if(b(a.table().node()).hasClass("searchHighlight")||c.oInit.searchHighlight||b.fn.dataTable.defaults.searchHighlight)a.on("draw.dt.dth column-visibility.dt.dth column-reorder.dt.dth",function(){e(f,a)}).on("destroy",function(){a.off("draw.dt.dth column-visibility.dt.dth column-reorder.dt.dth")}),
a.search()&&e(f,a)}})})(window,document,jQuery);
(function(h,g,a){function e(d,c){d.unhighlight();c.rows({filter:"applied"}).data().length&&(c.columns().every(function(){this.nodes().flatten().to$().unhighlight({className:"column_highlight"});this.nodes().flatten().to$().highlight(a.trim(this.search()).split(/\s+/),{className:"column_highlight"})}),d.highlight(a.trim(c.search()).split(/\s+/)))}a(g).on("init.dt.dth",function(d,c){if("dt"===d.namespace){var b=new a.fn.dataTable.Api(c),f=a(b.table().body());if(a(b.table().node()).hasClass("searchHighlight")||
c.oInit.searchHighlight||a.fn.dataTable.defaults.searchHighlight)b.on("draw.dt.dth column-visibility.dt.dth column-reorder.dt.dth",function(){e(f,b)}).on("destroy",function(){b.off("draw.dt.dth column-visibility.dt.dth column-reorder.dt.dth")}),b.search()&&e(f,b)}})})(window,document,jQuery);

88
features/searchPane/dataTables.searchPane.css
Unescape View File

@ -0,0 +1,88 @@
div.dt-searchPane {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
align-content: flex-start;
align-items: stretch;
height: 100%;
margin: 1em 0;
}
div.dt-searchPane div.pane {
position: relative;
flex: 1;
margin: 0 0.5%;
border: 1px solid #ccc;
/*width: 15.5%;
margin: 0 0.583333333%;*/
}
div.dt-searchPane div.pane button[type=button] {
display: none;
}
div.dt-searchPane div.pane.filtering button[type=button] {
display: block;
position: absolute;
right: 6px;
top: 6px;
border: 1px solid #999;
background: rgba(0, 0, 0, 0.1);
border-radius: 3px;
cursor: pointer;
}
div.dt-searchPane div.pane.filtering button[type=button]:hover {
background: rgba(0, 0, 0, 0.2);
}
div.dt-searchPane div.pane div.title {
box-sizing: border-box;
height: 30px;
padding: 0.35em;
font-size: 1.1em;
background-color: rgba(0, 0, 0, 0.075);
border-bottom: 1px solid #ddd;
}
div.dt-searchPane div.pane div.scroller {
position: absolute;
top: 30px;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
}
div.dt-searchPane div.pane div.scroller ul {
list-style: none;
margin: 0;
padding: 0;
}
div.dt-searchPane div.pane div.scroller ul li {
position: relative;
margin: 0;
padding: 0;
cursor: pointer;
}
div.dt-searchPane div.pane div.scroller ul li:nth-child(odd) {
background: rgba(0, 0, 0, 0.03);
}
div.dt-searchPane div.pane div.scroller ul li.selected {
background: #3276b1;
color: white;
}
div.dt-searchPane div.pane div.scroller ul li span.label {
display: inline-block;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 85%;
vertical-align: middle;
padding: 0.2em 0.3em;
}
div.dt-searchPane div.pane div.scroller ul li span.count {
display: inline-block;
width: 14%;
margin-right: 1%;
font-size: 0.8em;
color: white;
text-align: center;
background-color: #3276b1;
border-radius: 3px;
}

187
features/searchPane/dataTables.searchPane.js
Unescape View File

@ -0,0 +1,187 @@
// TODO
// - Tidy up class names
// - Clean up code into functions
// - Option to have vertical layout class
// - Number of horizontal panels class options
// - Threshold option - require that there is duplicate information in a column before it is used
// - Styling for selected
// - Styling for container / header
// - Styling for clear option
// - State saving integration
(function( factory ){
if ( typeof define === 'function' && define.amd ) {
// AMD
define( ['jquery', 'datatables.net'], function ( $ ) {
return factory( $, window, document );
} );
}
else if ( typeof exports === 'object' ) {
// CommonJS
module.exports = function (root, $) {
if ( ! root ) {
root = window;
}
if ( ! $ || ! $.fn.dataTable ) {
$ = require('datatables.net')(root, $).$;
}
return factory( $, root, root.document );
};
}
else {
// Browser
factory( jQuery, window, document );
}
}(function( $, window, document, undefined ) {
'use strict';
var DataTable = $.fn.dataTable;
function SearchPanes ( settings, opts ) {
var that = this;
var table = new DataTable.Api( settings );
var container = $('<div class="dt-searchPane"/>')
.appendTo( opts.container );
table.columns(opts.columns).eq(0).each( function ( idx ) {
var column = table.column( idx );
var list = $('<ul/>');
var tags = $( column.header() ).hasClass('tags');
var bins = that._binData( column.data().flatten(), tags );
// On initialisation, do we need to set a filtering value from a
// saved state or init option?
var search = column.search();
search = search.length && search[0] ?
search[0].substr( 1, search[0].length-2 ).split('|') :
[];
var data = tags ?
table.ajax.json().tags :
column.data().unique().sort().toArray();
for ( var i=0, ien=data.length ; i<ien ; i++ ) {
if ( data[i] ) {
var li = $('<li/>')
.html( '<span class="label">'+data[i]+'</span>' )
.data( 'filter', data[i] )
.append( $('<span class="count" />').html( bins[ data[i] ] ) );
if ( $.inArray( data[i], search ) !== -1 ) {
li.addClass('selected');
}
list.append( li );
}
}
$(container).append(
$('<div class="pane"/>')
.data( 'column', idx )
.addClass( search.length ? 'filtering' : '' )
.append( '<button type="button" class="close">&times;</button>' )
.append( $('<div class="title"/>').html( $(column.header()).text() ) )
.append( $('<div class="scroller"/>').append( list ) )
);
} );
$(container).on( 'click', 'li', function () {
if ( $(this).hasClass( 'selected' ) ) {
$(this).removeClass( 'selected' );
}
else {
$(this).addClass( 'selected' );
}
var pane = $(this).closest('div.pane');
var filters = pane.find( 'li.selected' );
if ( filters.length === 0 ) {
pane.removeClass('filtering');
table
.column( pane.data('column') )
.search('')
.draw();
}
else {
pane.addClass('filtering');
table
.column( pane.data('column') )
.search( $.map( filters, function (filter) {
return $(filter).data('filter');
} ).join('|'), true, false )
.draw();
}
} );
$(container).on( 'click', 'button.close', function () {
var pane = $(this).closest('div.pane');
pane.find( 'li.selected' ).removeClass( 'selected' );
pane.removeClass('filtering');
table
.column( pane.data('column') )
.search('')
.draw();
} );
}
$.extend( SearchPanes.prototype, {
_binData: function ( data, tags ) {
var out = {};
var add = function ( d ) {
if ( ! out[ d ] ) {
out[ d ] = 1;
}
else {
out[ d ]++;
}
};
data.each( function (d) {
if ( ! d ) {
return;
}
if ( tags ) {
var a = d.split(',');
for ( var i=0, ien=a.length ; i<ien ; i++ ) {
add( a[i] );
}
}
else {
add( d );
}
} );
return out;
}
} );
$(document).on( 'init.dt', function (e, settings, json) {
if ( e.namespace !== 'dt' ) {
return;
}
var init = settings.oInit.searchPane;
var defaults = DataTable.defaults.searchPane;
if ( init || defaults ) {
var opts = $.extend( {}, init, defaults );
if ( init !== false ) {
new SearchPanes( settings, opts );
}
}
} );
}));

1
features/searchPane/dataTables.searchPane.min.css vendored
Unescape View File

@ -0,0 +1 @@
div.dt-searchPane{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-around;align-content:flex-start;align-items:stretch;height:100%;margin:1em 0}div.dt-searchPane div.pane{position:relative;flex:1;margin:0 0.5%;border:1px solid #ccc}div.dt-searchPane div.pane button[type=button]{display:none}div.dt-searchPane div.pane.filtering button[type=button]{display:block;position:absolute;right:6px;top:6px;border:1px solid #999;background:rgba(0,0,0,0.1);border-radius:3px;cursor:pointer}div.dt-searchPane div.pane.filtering button[type=button]:hover{background:rgba(0,0,0,0.2)}div.dt-searchPane div.pane div.title{box-sizing:border-box;height:30px;padding:0.35em;font-size:1.1em;background-color:rgba(0,0,0,0.075);border-bottom:1px solid #ddd}div.dt-searchPane div.pane div.scroller{position:absolute;top:30px;bottom:0;left:0;right:0;overflow:auto}div.dt-searchPane div.pane div.scroller ul{list-style:none;margin:0;padding:0}div.dt-searchPane div.pane div.scroller ul li{position:relative;margin:0;padding:0;cursor:pointer}div.dt-searchPane div.pane div.scroller ul li:nth-child(odd){background:rgba(0,0,0,0.03)}div.dt-searchPane div.pane div.scroller ul li.selected{background:#3276b1;color:white}div.dt-searchPane div.pane div.scroller ul li span.label{display:inline-block;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:85%;vertical-align:middle;padding:0.2em 0.3em}div.dt-searchPane div.pane div.scroller ul li span.count{display:inline-block;width:14%;margin-right:1%;font-size:0.8em;color:white;text-align:center;background-color:#3276b1;border-radius:3px}

5
features/searchPane/dataTables.searchPane.min.js vendored
Unescape View File

@ -0,0 +1,5 @@
(function(b){"function"===typeof define&&define.amd?define(["jquery","datatables.net"],function(c){return b(c,window,document)}):"object"===typeof exports?module.exports=function(c,a){c||(c=window);if(!a||!a.fn.dataTable)a=require("datatables.net")(c,a).$;return b(a,c,c.document)}:b(jQuery,window,document)})(function(b,c,a){function f(c,a){var j=this,d=new k.Api(c),g=b('<div class="dt-searchPane"/>').appendTo(a.container);d.columns(a.columns).eq(0).each(function(l){for(var e=d.column(l),c=b("<ul/>"),
a=b(e.header()).hasClass("tags"),n=j._binData(e.data().flatten(),a),h=e.search(),h=h.length&&h[0]?h[0].substr(1,h[0].length-2).split("|"):[],a=a?d.ajax.json().tags:e.data().unique().sort().toArray(),i=0,m=a.length;i<m;i++)if(a[i]){var f=b("<li/>").html('<span class="label">'+a[i]+"</span>").data("filter",a[i]).append(b('<span class="count" />').html(n[a[i]]));-1!==b.inArray(a[i],h)&&f.addClass("selected");c.append(f)}b(g).append(b('<div class="pane"/>').data("column",l).addClass(h.length?"filtering":
"").append('<button type="button" class="close">&times;</button>').append(b('<div class="title"/>').html(b(e.header()).text())).append(b('<div class="scroller"/>').append(c)))});b(g).on("click","li",function(){b(this).hasClass("selected")?b(this).removeClass("selected"):b(this).addClass("selected");var a=b(this).closest("div.pane"),c=a.find("li.selected");0===c.length?(a.removeClass("filtering"),d.column(a.data("column")).search("").draw()):(a.addClass("filtering"),d.column(a.data("column")).search(b.map(c,
function(a){return b(a).data("filter")}).join("|"),!0,!1).draw())});b(g).on("click","button.close",function(){var a=b(this).closest("div.pane");a.find("li.selected").removeClass("selected");a.removeClass("filtering");d.column(a.data("column")).search("").draw()})}var k=b.fn.dataTable;b.extend(f.prototype,{_binData:function(a,b){var c={};a.each(function(a){if(a)if(b)for(var a=a.split(","),g=0,f=a.length;g<f;g++){var e=a[g];c[e]?c[e]++:c[e]=1}else c[a]?c[a]++:c[a]=1});return c}});b(a).on("init.dt",
function(a,c){if("dt"===a.namespace){var j=c.oInit.searchPane,d=k.defaults.searchPane;if(j||d)d=b.extend({},j,d),!1!==j&&new f(c,d)}})});

105
features/searchPane/dataTables.searchPane.scss
Unescape View File

@ -0,0 +1,105 @@
div.dt-searchPane {
display:flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
align-content: flex-start;
align-items: stretch;
height: 100%;
margin: 1em 0;
div.pane {
position: relative;
flex: 1;
margin: 0 0.5%;
border: 1px solid #ccc;
/*width: 15.5%;
margin: 0 0.583333333%;*/
button[type=button] {
display: none;
}
&.filtering {
button[type=button] {
display: block;
position: absolute;
right: 6px;
top: 6px;
border: 1px solid #999;
background: rgba(0,0,0,0.1);
border-radius: 3px;
cursor: pointer;
&:hover {
background: rgba(0,0,0,0.2);
}
}
}
div.title {
box-sizing: border-box;
height: 30px;
padding: 0.35em;
font-size: 1.1em;
background-color: rgba(0,0,0,0.075);
border-bottom: 1px solid #ddd;
}
div.scroller {
position: absolute;
top: 30px;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
ul {
list-style: none;
margin: 0;
padding: 0;
li {
position: relative;
margin: 0;
padding: 0;
cursor: pointer;
&:nth-child(odd) {
background: rgba(0,0,0,0.03);
}
&.selected {
background: #3276b1;
color: white;
}
span.label {
display: inline-block;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 85%;
vertical-align: middle;
padding: 0.2em 0.3em;
}
span.count {
display: inline-block;
width: 14%;
margin-right: 1%;
font-size: 0.8em;
color: white;
text-align: center;
background-color: #3276b1;
border-radius: 3px;
}
}
}
}
}
}

524
features/searchPane/index.html
Unescape View File

@ -0,0 +1,524 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>DataTables search pane example</title>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="dataTables.searchPane.css">
<style type="text/css">
body {
font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="dataTables.searchPane.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
$('#example').DataTable( {
searchPane: {
container: '#grouping',
columns: ':not(:last-child)'
}
} );
} );
</script>
</head>
<body>
<div class="container">
<p style="text-align:center">Space for banner etc</p>
<table id="example" class="display nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<div id="grouping" style="height: 200px;"/>
</div>
</body>
</html>
Write Preview
Loading…
Cancel
Save