Skip to content

Instantly share code, notes, and snippets.

@sushain97

sushain97/fsl-professors.html

Last active September 14, 2016 01:12
Show Gist options
  • Save sushain97/c1a5551a5b6a3b3fb8815fcc87e871b9 to your computer and use it in GitHub Desktop.
Save sushain97/c1a5551a5b6a3b3fb8815fcc87e871b9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
fsl-professors.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta name="author" content="Sushain K. Cherivirala (www.skc.name)">
<title>CMU Senate: Faculty Student Lunch Professors</title>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.3.5/tabletop.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cosmo/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.12/af-2.1.2/fh-3.1.2/r-2.1.0/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.12/af-2.1.2/fh-3.1.2/r-2.1.0/datatables.min.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/autofill/2.1.2/css/autoFill.bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.0/css/responsive.bootstrap.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/autofill/2.1.2/js/dataTables.autoFill.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/autofill/2.1.2/js/autoFill.bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.0/js/responsive.bootstrap.min.js"></script> -->
<!--[if lt IE 9]>
<script type="text/javascript" src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script type="text/javascript" src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
.dataTables_info { display: inline-block; }
.dataTables_filter { display: inline-block; float: right; }
.aboveTable { margin-bottom: 1.5em; }
</style>
</head>
<body>
<div class="container">
<h1 style="display: inline-block; margin-bottom: 1em">Faculty Student Lunch Professors</h1>
<a href="https://cmusenate.org" target="_blank">
<img src="https://cmusenate.org/wp-content/uploads/2016/08/finallogo-color.png" style="float: right; height: 4.75em; padding-top: 12px;">
</a>
<table class="table table-responsive table-condensed table-striped table-bordered table-hover">
<tfoot>
<tr>
<th>
<div class="input-group input-sm">
<div class="input-group-addon input-sm"><i class="fa fa-search"></i></div>
<input type="text" class="form-control input-sm" id="fullname" placeholder="Search Name">
</div>
</th>
<th></th>
<th>
<div class="input-group input-sm">
<div class="input-group-addon input-sm"><i class="fa fa-search"></i></div>
<select class="form-control input-sm" id="collegeaffiliation">
<option value="">All</option>
</select>
</div>
</th>
<th>
<div class="input-group input-sm">
<div class="input-group-addon input-sm"><i class="fa fa-search"></i></div>
<select class="form-control input-sm" id="departments">
<option value="">All</option>
</select>
</div>
</th>
<th>
<div class="input-group input-sm">
<div class="input-group-addon input-sm"><i class="fa fa-search"></i></div>
<input type="text" class="form-control input-sm" id="areasofexpertise" placeholder="Search Area of Expertise">
</div>
</th>
</tr>
</tfoot>
</table>
<br>
</div>
<script type="text/javascript">
var spreadsheetKey = '1VvTNnCbL5hciVM6XYBCUNmW_r4ZE6kEhjXdB72xEJEM';
var columns = [{
'data': 'fullname',
'title': 'Name'
}, {
'data': 'andrewid',
'title': 'Andrew ID'
}, {
'data': 'collegeaffiliation',
'title': 'College Affiliation(s)'
}, {
'data': 'departments',
'title': 'Department(s)'
}, {
'data': 'areasofexpertise',
'title': 'Area(s) of Expertise'
}, {
'data': 'website',
'title': 'Website'
}];
$(document).ready(function () {
Tabletop.init({
key: spreadsheetKey,
callback: function (data, tabletop) {
var table = $('table').DataTable({
data: data,
columns: columns,
dom: '<"aboveTable"if><t>',
fixedHeader: {
header: true,
footer: true
},
order: [
[0, 'asc']
],
paging: false,
columnDefs: [{
render: function (data, type, row) {
return data +
' &nbsp;<span style="float: right;"><a href="mailto:' + row['andrewid'] + '@andrew.cmu.edu" target="_blank">' +
'<i class="fa fa-envelope"></i></a>&nbsp;' +
' &nbsp;<a href="' + row['website'] + '" target="_blank">' +
'<i class="fa fa-external-link"></i></a></span>';
},
width: '20%',
targets: 0
},
{
width: '15%',
targets: [2, 3]
},
{
visible: false,
targets: [1, 5]
}
],
initComplete: function () {
var searchInput = $('.aboveTable input');
var label = searchInput.parent();
searchInput.parent().parent().append(searchInput.detach());
label.remove();
searchInput.wrap($('<div class="input-group input-sm">'));
searchInput.css('margin-left', 0);
searchInput.attr('placeholder', 'Search');
searchInput.before($('<div class="input-group-addon input-sm"><i class="fa fa-search"></i></div>'));
}
});
table.columns().every(function () {
var column = this;
$('input#' + column.dataSrc(), column.footer()).on('keyup change', function () {
if (column.search() !== this.value) {
column.search(this.value).draw();
}
});
var select = $('select#' + column.dataSrc(), column.footer());
if(select) {
var rawData = column.data();
var data = {};
for (var i = 0; i < rawData.length; i++) {
var splitData = rawData[i].split(',');
if (splitData.length == 1) {
splitData = rawData[i].split('/');
}
for (var j = 0; j < splitData.length; j++) {
data[splitData[j].trim()] = '';
}
}
data = Object.keys(data).sort();
for (var i = 0; i < data.length; i++) {
select.append('<option value="' + data[i] + '">' + data[i] + '</option>');
}
select.on('change', function () {
column.search(this.value).draw();
});
}
});
},
simpleSheet: true,
processing: true
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment