Skip to content

Instantly share code, notes, and snippets.

@musakkhir

musakkhir/index.html

Last active July 13, 2017 12:02
Show Gist options
  • Save musakkhir/e1d3d0a11e66e52003f04a01c8c9f81c to your computer and use it in GitHub Desktop.
Save musakkhir/e1d3d0a11e66e52003f04a01c8c9f81c to your computer and use it in GitHub Desktop.
Download ZIP
JQuery Datatable
Raw
index.html
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>JQuery DataTable</title>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.3/css/jquery.dataTables.css">
<style type="text/css">
.node {
cursor: pointer;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
.node .text {
fill: white;
font-size: 8px;
}
.ORG .circle {
fill: #1d3649;
}
.EMR .circle {
fill: #B2D0F5;
stroke: #5596e6;
stroke-dasharray: 3px, 3px;
opacity: .5;
}
.EMR .circle:hover {
fill: #5596e6;
}
.link {
fill: none;
stroke: #eee;
stroke-width: 1.5px;
font: 10px sans-serif;
}
.link.active {
stroke: #ddd;
stroke-width: 2;
}
.arrow {
fill: #666;
}
.arrow.active {
stroke-width: 0 !important;
}
</style>
</head>
<body>
<div id="Filters">
<h5>Filter by Category</h5>
<ul class="list-inline">
<li><label for="">Electricians: </label> <input type="checkbox" value="Electricians" class="categoryFilter" name="categoryFilter"> </li>
<li><label for="">Carpenter: </label> <input type="checkbox" value="Carpenter" class="categoryFilter" name="categoryFilter"> </li>
</ul>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Category</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Category</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Electricians</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Carpenter</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Carpenter, Electricians</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td> </td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Architect </td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var categoryFilter,categoryCol,categoryArray,found;
//creates selected checkbox array
categoryFilter = $('.categoryFilter:checked').map(function () {
return this.value;
}).get();
if(categoryFilter.length){
categoryCol = data[2]; //filter column
categoryArray = $.map( categoryCol.split(','), $.trim); // splites comma seprated string into array
// finding array intersection
found = $(categoryArray).not($(categoryArray).not(categoryFilter)).length;
if(found == 0){
return false;
}
else{
return true;
}
}
// default no filter
return true;
}
);
$(document).ready(function() {
var example = $('#example').DataTable();
$('.categoryFilter').click(function(){
example.draw();
});
} );
</script>
</body>
</html>
<!-- end snippet -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment