Bootstrap Table
HTML
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://rawgit.com/thornomad/bootstrap-table/filterby-array/src/bootstrap-table.js"></script>
<table id="table">
<thead>
<tr>
<th data-field="date">Date</th>
<th data-field="desc">Description</th>
<th data-field="tags">Tags</th>
</tr>
</thead>
</table>
<br>
<button id="filter-general">General</button>
<button id="filter-rotation">Rotation</button>
<button id="clear">clear</button>
JavaScript
var data = [{
"date": "2016-05-10",
"tags": "General, Research, Rotation",
"desc": "Nunc velit lectus, ornare vitae fringilla eget, vestibulum quis tortor."
},{
"date": "2016-04-22",
"tags": "General",
"desc": "Nunc velit lectus, ornare vitae fringilla eget, vestibulum quis tortor."
},{
"date": "2016-03-23",
"tags": "Research, Rotation",
"desc": "Nunc velit lectus, ornare vitae fringilla eget, vestibulum quis tortor."
},{
"date": "2015-11-01",
"tags": "Rotation",
"desc": "Nunc velit lectus, ornare vitae fringilla eget, vestibulum quis tortor."
},{
"date": "2016-08-15",
"tags": "General, Rotation",
"desc": "Nunc velit lectus, ornare vitae fringilla eget, vestibulum quis tortor."
}];
$(function() {
$table = $('#table');
$table.bootstrapTable({
data: data
});
$('#clear').click(function() {
$table.bootstrapTable('filterBy', {});
});
$('#filter-general').click(function() {
$table.bootstrapTable('filterBy', {
tags: "General"
});
});
$('#filter-rotation').click(function() {
$table.bootstrapTable('filterBy', {
tags: "Rotation"
});
});
});