I am using Footable.js (plus all the other js files you need to make it work) and all looks great but when I use my dropdown (select option value) filter to filter the table by column 3 only 7 out of the 10 selects work. I checked spelling in all of them. Not sure why 3 of them will not work and filter the table like the other 7 do.
The Search filter
Search: <input id="filter" type="text"/></div>
<div id="degree-bar">Type of Degree: <select class="filter-status">
<option></option>
<option value="certificate">Certificate</option>
<option value="minor">Minor</option>
<option value="associate">Associate</option>
<option value="bachelor's">Bachelor's</option>
<option value="bachelor's/master's">Bachelor's/Master's</option>
<option value="licensure">Licensures</option>
<option value="occupational">Occupational endorsements</option>
<option value="post-baccalaureate">Post-baccalaureate licensure</option>
<option value="special">Special training programs</option>
<option value="pre-professional">Pre-professional opportunities</option>
</select>
A portion of the table: It will sort bachelor's, associate and certificate but not special or occupational.
<tr>
<td><a href="http://www.uaf.edu/catalog/current/programs/yupik_lang_culture.html">Yup'ik Language and Culture</a></td>
<td><a href="http://www.uaf.edu/anlc/classes/">College of Liberal Arts</a></td>
<td><span title="bachelor's">bachelor's</span></td>
</tr>
<tr>
<td><a href="http://www.uaf.edu/catalog/current/programs/yupik_lang.html">Yup'ik Language Proficiency</a></td>
<td><a href="http://www.uaf.edu/anlc/classes/">College of Liberal Arts</a></td>
<td><span title="certificate">certificate</span>, <span title="associate">associate</span></td>
</tr>
<tr>
<td><a href="http://www.uaf.edu/catalog/current/programs/alaska_law_enforcement.html">Law Enforcement Academy</a></td>
<td><a href="http://www.ctc.uaf.edu/programs/lawacad/">College of Rural and Community Development</a></td>
<td><span title="special">special training program</span></td>
</tr>
<tr>
<td><a href="http://www.uaf.edu/catalog/current/programs/paramedic.html">Paramedic Academy</a></td>
<td><a href="http://www.ctc.uaf.edu/programs/paramedic/">College of Rural and Community Development</a></td>
<td><span title="special">special training program</span></td>
</tr>
<tr>
<td><a href="http://www.uaf.edu/catalog/current/programs/wm_tech.html">Welding and Materials Technology</a></td>
<td><a href="http://www.ctc.uaf.edu/programs/weld/">College of Rural and Community Development</a></td>
<td><span title="special">special training program</span></td>
</tr>
<tr>
<td><a href="http://www.uaf.edu/catalog/current/programs/admin_assist.html">Administrative Assistant</a></td>
<td><a href="http://www.ctc.uaf.edu/programs/aaa/">College of Rural and Community Development</a></td>
<td><span title="occupational">occupational endorsement</span></td>
</tr>
To see it in action: Webpage complete
From the code you've posted, it seems like the problem is an 's' at the end of the value of the option and span.
The options values are: (Notice the 's' at the end of endorsements and programs)
<option value="occupational">Occupational endorsements</option>
<option value="special">Special training programs</option>
The span values in the rows look like: (Notice there is no 's' at the end of endorsement and program)
<span title="special">occupational endorsement</span>
<span title="special">special training program</span>
Here's a plunk that demonstrates the issue: (I put an 's' in both places) http://plnkr.co/edit/yCmyoJmFpkzcUplaMgVg